Guillermo Esteves

Given to Tri

2023-07-15T12:00:00-06:00

It’s been a little over a year since I started doing triathlons, and one of the things I’ve been pleasantly surprised by is how much I enjoy writing about it. Whether it’s writing a race report or about a crappy experience with a treadmill, I’ve found it’s a fun creative outlet.

However, until now, I’ve been publishing all these posts here, in what’s ostensibly my professional work website, and there have been a few things I’ve wanted to write about and didn’t, simply because I didn’t want to flood it with triathlon content. So I’ve moved all of my triathlon posts into a new website, which I’ve called Given to Tri, because I can’t stop myself from throwing a reference to my favorite band in every single one of my projects.

I don’t know if my publishing frequency will increase significantly right away, but at least now I’ll have more freedom to do so. Maybe I’ll start writing more about training, or start a link blog, who knows. In any case, you can subscribe to the RSS feed using your favorite newsreader or follow me on Mastodon to stay up to date when new posts go up.

GIFs are now "for boomers" and "cringe"

2022-09-16T09:00:00-06:00

So now they are basically the cringe reaction image your millennial boss uses in Slack.

Welcome to the new Verge

2022-09-15T12:00:00-06:00

The very last project I was involved in before leaving Vox is finally live. This new version of The Verge looks awesome and I’m so happy to see it launch.

Heroku discontinues free plans

2022-08-31T09:00:00-06:00

In order to focus our resources on delivering mission-critical capabilities for customers, we will be phasing out our free plan for Heroku Dynos, free plan for Heroku Postgres, and free plan for Heroku Data for Redis®, as well as deleting inactive accounts.

End of an era. I wouldn’t be where I am today if I hadn’t had free spaces to experiment and learn web development when I couldn’t afford even the cheapest hosting. And I mean that literally—I got my job at Vox, which allowed me to stay in the United States, because I had my personal website and portfolio, including that old Star Wars in HTML & CSS demo, on a free Heroku account. It makes me sad to see one such space going away.

I’m not sure where I’ll move my Heroku projects (both paid and free), but I’m currently looking at Render and Fly.io as alternatives.

FORM releases a workout builder

2022-08-17T08:00:00-06:00

I’ve enjoyed using my FORM goggles for swim training, but one of the challenges has been finding workouts similar to the ones prescribed by my training plan (although FORM’s huge workout library has made that easier). Having a workout builder in the FORM app is a bit of a game changer, can’t wait to try it.

Useful praise

2022-07-29T10:00:00-06:00

A regular practice of praising your colleagues builds goodwill and trust, helps to dispel imposter syndrome, and supports a team that can capably reflect on what it does well as well as where it goes wrong. Because being great is more than a matter of improving your weaknesses—it’s also about building on your strengths.

The quiet glory of aging into athleticism

2022-07-27T12:30:00-06:00

How is it, at age 41, that I feel like my body can do more — and that I can take more joy in it — than ever before? I’m not faster, but I’m more resilient. I’m not doing as many overall miles, but I feel stronger. I love it more, and more feels possible. Sure, my knees are slightly more creaky, and I have to be keenly attentive to stretching and Theragunning and hydrating in a way I never was before. But exercise just generally no longer feels punitive or disciplinary. Instead, I feel something far more akin to curiosity. If part of me feels weak or tweaky, what’s struggling in other parts of my body and needs strengthening? And if I’m attentive to my body, if I’m legitimately kind to it, can it do more than I thought it could?

This quote really resonates with me. I followed a similar path to the one the author describes: The pandemic hit, I got really into Peloton at the end of 2020, then one thing led to another and now I’m training for a full Ironman triathlon next year. I found something similar along the way, that I’m stronger than I thought I was, and capable of harder things than I thought possible; in fact, I don’t know what I’m capable of, so I’m trying to find out.

That feeling extends beyond training, into the rest of my life, which is both powerful and liberating, but it’s also made me consider how other aspects of training, such as “active recovery” and “rest”, apply to, say, my work life. I can’t train at 100% intensity 100% of the time and expect to perform well, so why should I treat work that way?

A four-day week at five days' pay

2022-07-27T10:05:00-06:00

While there is no data for the official U.S. trial yet, Schor did have some results from three months of the February 1st trial. Workers, she said, are experiencing “less burnout, less stress, better physical health, better mental health, people sleeping more, people having higher life satisfaction.”

(Via Mandy Brown)

The best way to reheat pizza

2022-07-26T12:30:00-06:00

I’m a big fan of the reddit method described here, but I’m intrigued by the air fryer method, since my toaster over has a convection setting. I’ll have to try that next time I order from Pinky G’s.

The Apple Store Time Machine

2022-07-25T13:00:00-06:00

Four different Apple Stores throughout the years, perfectly recreated in Unity, down to the smallest details. It faithfully replicates the sensation of wandering around an Apple Store, trying it figure out how the hell to check out.

Telemetry Overlay

2022-07-22T13:03:00-06:00

I recently bought a GoPro and I’ve been trying to figure out how to make those cool cycling videos where the data from the bike computer is overlaid on top. I tried using Garmin VIRB after seeing it recommended on various cycling forums, but I found it incredibly frustrating to use. Then I found this Telemetry Overlay app, which is steeply priced at $150, but makes it a snap to overlay data from a FIT file on a GoPro video, with tons of customization options. Highly recommended despite the price; here’s a test video I put together with it in just a few minutes.

How independent writers are turning to AI

2022-07-20T10:39:00-06:00

Great story from The Verge, but the presentation is just mind-blowing. Incredible use the storytelling kit my former team at Vox owns and maintains.

Using DALL·E 2 to replicate the styles of well-known portrait photographers

2022-07-20T08:00:00-06:00

This is wild.

Instagram is dead

2022-07-19T20:55:00-06:00

Om Malik:

Instagram’s transformation into QVC is now complete and absolute. Instagram is dead — or at least the Instagram I knew and loved is dead. It is no longer part of my photographic journey.

This is why I’m happy to have my own photography website. Social networks come and go, but at least there I’ll always be in control of how my photography is presented. Perhaps it’s time to bring POSSE back.

(Via Susan Robertson)

First images from the James Webb Space Telescope

2022-07-12T09:30:00-06:00

The dawn of a new era in astronomy has begun as the world gets its first look at the full capabilities of NASA’s James Webb Space Telescope, a partnership with ESA (European Space Agency) and CSA (Canadian Space Agency). The telescope’s first full-color images and spectroscopic data were released during a televised broadcast at 10:30 a.m. EDT (14:30 UTC) on Tuesday, July 12, 2022, from NASA’s Goddard Space Flight Center in Greenbelt, Maryland. These listed targets below represent the first wave of full-color scientific images and spectra the observatory has gathered, and the official beginning of Webb’s general science operations. They were selected by an international committee of representatives from NASA, ESA, CSA, and the Space Telescope Science Institute.

Absolutely breathtaking. The level of detail in the images captured by the JWSS is nothing short of astonishing, especially when compared to Hubble.

Internet Explorer 11 has retired and is officially out of support

2022-06-15T07:05:00-06:00

After 25+ years of helping people use and experience the web, Internet Explorer (IE) is officially retired and out of support as of today, June 15, 2022. To many millions of you, thank you for using Internet Explorer as your gateway to the internet.

End of an era.

How to run Slack apps on free Heroku dynos seamlessly using CloudFront & Lambda@Edge

2022-04-17T00:00:00-06:00

I’ve spent the past few weeks rewriting a few of my old Slack bots, mainly because I wrote most of them years ago as custom integrations and wanted to learn how to build modern Slack apps (and also because building bots is just fun). In case you’re curious, the three apps I ended up building were:

Trebekbot, which sets up a perpetual game of Jeopardy! in your Slack channels.
Weatherbot, which posts weather forecasts in Slack.
Wordlebot, which shows stats about Wordle games in that Slack channel everyone seems to have where people post their scores.

(Update: Now that Heroku has discontinued its free plans, I’ve taken down these bots. I’m leaving this post up for future reference, anyway.)

How Slack apps work

The basic flow of these Slack apps is largely the same:

Someone performs an action in Slack, like mentioning the app (for example, @Trebekbot) or posting a slash command (like Weatherbot’s /weather command).
Slack makes a POST request to an endpoint on the app server with a payload describing the event. In my apps’ case, /slack/events for events like app mentions and /slack/slash for slash commands.
The app enqueues some background job to do whatever the user requested, then immediately acknowledges response of Slack’s request with an HTTP 200 status. For events, the response body can be empty; for slash commands, you can return {"response_type":"in_channel"} in the body if you want the user’s slash command to be visible in the channel.
Later on, the background job does whatever it needs to do, including, for example, posting a message in Slack with the results.

Importantly, Slack requires that 200 status to be returned within 3 seconds, or the event delivery is considered a failure. For slash commands, this results in a “timeout was reached” error being shown to the user; for other events, Slack retries up to three times, backing off exponentially. Slack strongly encourages the use of queues to handle events for this reason.

My problem

That is all fine, except that I’ve been hosting all these apps on Heroku free dynos, because it’s easy to set up, and I’m lazy, and cheap. However, free dynos shut down after about 30 minutes of inactivity and wake up when they receive a new request, but unfortunately take a bit longer than 3 seconds to do so. That means that if someone uses one of these apps while the dynos are asleep, one of these things might happen:

If they post a slash command, the request will time out, the user will see that “timeout was reached” error in Slack, but then the dyno will finish waking up, enqueue the job, and successfully post the response. Not the end of the world, but I’d rather not show an error message to users, especially if the command is successful in the end.
If it’s some other event, such as an app mention, the request will time out, and Slack will keep retrying until the dyno is awake, which might result in multiple background jobs enqueued, and multiple responses from the app in Slack. Again, not the end of the world, but kind of annoying. (If you’ve invoked @Trebekbot and it responded with two or three games at once, that’s why.)

The solution is simple: just upgrade the dynos to paid ones so they never go to sleep, duh. But again, I’m cheap, and frankly none of these apps see enough use to justify having dynos running 24/7. What to do?

Enter CloudFront and Lambda@Edge

Since I already had these apps behind CloudFront, I started wondering if I could somehow make CloudFront, and not Heroku, return the 200 status Slack expects, so it doesn’t have to wait for the dyno to be up. Turns out, the answer is yes, with some tweaking of CloudFront’s configuration and a short Lambda@Edge function.

First, I set up two origins in my CloudFront distribution, both pointing to Heroku, but one using the default origin response timeout of 30 seconds and the other using the minimum timeout of 1 second.

Then, I set up two behaviors in the distribution: The Slack endpoints (/slack/*) use the origin with the short timeout, and everything else uses the default one. That way, if someone hits, say, the app’s website while the dyno is asleep, it’ll render after a few seconds, when it wakes up. But if Slack posts to the /slack/* endpoints while the dyno is asleep, CloudFront will respond with a 504 status (Gateway Timeout) after just 1 second. If the dyno is awake, it’ll respond to the request as normal, before the 1 second timeout.

Finally, in the /slack/* behavior, I set up a Lambda@Edge function with an origin response trigger, which checks if the response is a 504 status, and if so, replaces the response with a 200 status with the appropriate body. Here’s the entire function:

exports.handler = (event, context, callback) => {
  let response = event.Records[0].cf.response;
  const request = event.Records[0].cf.request;

  if (response.status === '504') {
    // If the request is due to a slash command,
    // return this JSON response so the command
    // is visible in channel.
    if (request.uri === '/slack/slash') {
      response = {
        status: '200',
        headers: {
          'content-type': [{
            key: 'Content-Type',
            value: 'application/json'
          }]
        },
        body: JSON.stringify({ response_type: 'in_channel' })
      };
    } else {
      // Otherwise, just return an empty body.
      response = {
        status: '200',
        body: ''
      };
    }
  }
  callback(null, response); 
};

What ends up happening is:

A user performs an action in Slack, such as posting a slash command or mentioning the app.
Slack makes a POST request to the corresponding /slack/* endpoint, which sits behind CloudFront.
CloudFront receives the request from Slack and makes the request to the origin, Heroku.
If the Heroku dyno is awake, it receives the request, enqueues the background jobs, and returns a 200 response before CloudFront’s 1 second timeout is up. CloudFront returns the 200 to Slack, and Slack is happy.
If the Heroku dyno is asleep, it begins waking up. However, after 1 second, CloudFront gives up and returns a 504 status. Meanwhile, the dyno finishes waking up and enqueues the background jobs.
The Lambda function executes, and since the response status from the origin was 504, it replaces the response with a 200, and returns it to Slack (with the appropriate body depending on the endpoint hit). Slack is happy!
A few seconds later, the background job runs, does whatever the user requested, and posts the result in Slack.

And with that, CloudFront is in charge of acknowledging receipt of Slack events when the Heroku dyno is asleep, users of these Slack apps don’t get any error messages or odd behavior in those cases, and more importantly, it’s saving me $7/month per dyno (and each of these apps has two!)

Weatherbot for Slack

2022-04-15T11:05:00-06:00

A weather app for Slack I just built, powered by the Dark Sky API. I spend so much time in Slack, being able to check the weather forecast from there seems like a perfectly natural thing to do.

Trebekbot for Slack

2022-04-04T10:00:00-06:00

A fun little time-waster I just built: It’s a Jeopardy! app, powered by the jService API, which sets up a perpetual game of Jeopardy! in your Slack channels. I strongly suggest you set this up in a separate channel if you decide to install it, it’s very addictive.

Hunters kill 20 Yellowstone wolves that roamed out of park

2022-01-07T10:00:00-06:00

Park officials said in a statement to AP that the deaths mark “a significant setback for the species’ long-term viability and for wolf research.”

One pack — the Phantom Lake Pack — is now considered “eliminated” after most or all of its members were killed over a two-month span beginning in October, according to the park.

Absolutely sickening. We need to have wolves protected under the Endangered Species Act immediately. Please, take action.

How I back up my Lightroom catalogs

2021-10-30T00:00:00-06:00

In general, I keep all my photos in a single Lightroom catalog, organized by date. This catalog, and the photos in it, reside in my Dropbox folder, and is backed up by Time Machine frequently, which gives me a couple levels of redundancy if something were to happen to my laptop. I keep the final, full-size, edited JPGs in iCloud, Flickr, and my own website, so I have ways to retrieve them if I have to.

However, keeping this one catalog around means it can get pretty huge over time, which is a problem because I don’t have unlimited space in either my Dropbox account or my laptop’s hard drive. I almost never revisit old photos, so most of the raw files in the catalog are just taking space for no real reason, except in the rare case I need to submit them as part of some photography competition. This means I’m happy to move my raw files out of my laptop to save space, as long as I still have access to them when needed; to do this, I follow this process more or less once a year, and every time I have to re-remember how to do it, so I might as well write it down here in case it’s useful to others.

The TL;DR

Once a year, export the previous year’s photos as a new Lightroom catalog
Copy that new catalog into at least two external drives
Compress the new catalog into a DMG image
Upload the catalog’s DMG image to Amazon Glacier for long-term storage, using Freeze
Once the new catalog and its photos are backed up, delete them from the hard drive to reclaim that space

Step 1: Exporting the past year’s photos as a new Lightroom catalog

Once a year, usually at the beginning of the year, I go into Lightroom, select all the photos from the previous year by right-clicking on the year’s folder, and export them as a new catalog, ensuring “export negative files” is selected.

This creates a new catalog, including all the raw files for all the photos from that year, in a new folder elsewhere on my computer. From there, I copy them to at least two external hard drives, so I have some redundancy if something were to happen to them (ideally one of them should be kept offsite). If I ever need to look at these catalogs, for example to grab the raw files as I mentioned above, I can simply plug in the drive, do what I need to do, then put it away again.

Step 2: Uploading the new catalog to Amazon Glacier

Next, I upload these catalogs to Glacier for long-term storage. This is optional, but I like the peace of mind of having this as a last resort if I were to lose all my external drives somehow.

The first step is to create a DMG image of the folder containing the new catalog and all its photos, by opening Disk Utility, selecting File > New Image > Image from Folder, and selecting the appropriate folder. I leave the default checkboxes checked; I don’t think compressing the image does much but I leave that on, and I don’t encrypt the image, but you may do so if you want. This will take a while, and at the end I have a .dmg file somewhere on my system.

To upload these files to Glacier, I use an app called Freeze, which makes the process a snap. It requires setting up an AWS user for it with the appropriate permissions to access Glacier (which I will leave as an exercise to the reader). With that user’s access key and secret set up in Freeze, I’ve created a new vault in Glacier to store my catalogs, and then it’s a simple process of dragging the DMG files into the vault and waiting for the uploads to complete.

Step 3: Reclaim hard drive space

Once the catalogs and their photos have been copied to the external drives and uploaded to Glacier, I delete those photos from the main catalog and remove them from my computer to clear up that space. And that’s it!

Caveats

While I rarely have a need for these older catalogs, I don’t want to risk losing them entirely if an external drive dies, which is why I rely on external drives and Glacier.
However, retrieving files from Glacier, even just to list the contents of the vault, takes hours. I’d rather not have to use it, which is why I emphasize copying the catalogs to multiple external drives. They’re cheap these days, anyway; I’ve been using these Seagate 2TB external drives for the past couple of years, with zero issues so far.
One problem with this strategy is that the process of exporting the previous year’s photos as a new catalog effectively copies them, so I need to have enough hard drive space to do that. I’ve definitely been in a situation where if I put it off too long, I won’t have enough space to do it.

That said, this strategy has worked well for me so far, and I feel it strikes a good balance between having access to old photos, keeping them safe, and preserving space on my laptop’s hard drive.

Local Knowledge: Guillermo Esteves

2021-05-18T17:30:00-06:00

I talked a little bit about my photography to Jackson Hole Magazine.

Pandemic pets bring comfort, companionship

2020-12-23T07:10:00-06:00

“My cats are in the local paper” is not a sentence I ever expected to say, but here we are.

One of my photos is up for Wildlife Photographer of the Year People's Choice Awards

2020-12-01T08:35:00-06:00

I’m extremely honored that one of my photographs has been shortlisted in London’s Natural History Museum’s Wildlife Photographer of the Year People’s Choice Awards, which is now open for votes.

Making intrinsic ratio elements with a max height

2016-08-10T00:00:00-06:00

Here’s something that took me longer than I care to admit to figure out how to do. I have a photoblog where I post the photos I make; I like to display them at high resolution, but when they’re in a portrait orientation (like this one), you usually can’t see the whole photo, so I limit them to the height of the viewport and give the visitor the option to “zoom in” by tapping on it. At the same time, I’d like to reserve the space for the photo so it doesn’t push the rest of the content down when it loads. To do this, I think most people are familiar with Thierry Koblentz’s intrinsic ratio technique, published in A List Apart way back in 2009: in short, you give the element a padding-top (or padding-bottom, if you need to support ancient versions of IE) that’s the height to width ratio you want as a percentage, then absolutely position the element inside. A 2:3 portrait photo’s height is 150% of its width (3/2 * 100%), so you give the container a padding-top: 150% and you get:

See the Pen Intrinsic ratio element by Guillermo Esteves (@gesteves) on CodePen.

Well, now the space for the photo is reserved before it loads, but you can’t see the whole thing. This is the part that took me a while to figure out: I want to limit the height of the photo to the height of the viewport, but since the height of its container is set by the padding, doing something like max-height: 100vh won’t work.

Taking a step back, the reason why the padding-top trick works in the first place is because its percentage value is interpreted as a percentage of the width of its containing element. Therefore, if I want to limit the intrinsic ratio element’s height, I’d need to limit its container’s width, based on the width to height ratio of the image, and have said width be dependent on the viewport’s height. A 2:3 element’s width is 66.67% of its height (2/3 * 100%), but since I want it to depend on the viewport height, then the width of the wrapper element should be 66.67vh (with a max-width: 100% to keep the width in check). Now I get:

See the Pen Intrinsic ratio element with max height by Guillermo Esteves (@gesteves) on CodePen.

Voilà, the element has an intrinsic ratio, it’s as tall as the viewport, and if I want the photo to embiggen I can use a little bit of JS to increase the width of the wrapper element, which in turn would make the intrinsic ratio element (and the photo inside) taller.

Building iOS-like transparency effects in CSS with backdrop-filter

2015-02-17T00:00:00-06:00

Today, thanks to a Vine video Jason shared in our front-end Slack channel, I learned about the -webkit-backdrop-filter property, which landed very recently in the WebKit Nightlies. Like the existing -webkit-filter property, it allows you to apply effects such as blur, grayscale, hue-rotate, and others, only instead of applying them to the element itself, they’re applied to whatever is behind the element. This lets you to do some very iOS-like transparency effects, like what I did to The Verge’s nav dropdown while experimenting with this:

In this example, I gave the dropdown background a semi-transparent color, and added a simple -webkit-backdrop-filter: blur(10px); to it. Instead of blurring the dropdown itself, it blurs whatever the dropdown covers when it’s open, giving it a little more depth by letting the blurred, colorful hero images show through.

You can see the effect in action in the following pen, although you’ll need to download and install the WebKit Nightly build to check it out.

See the Pen PwRPZa by Guillermo Esteves (@gesteves) on CodePen.

Evidently, as this just landed very recently in the nightlies, it’ll be a while before this has enough browser support to let us use it in production, but it’s cool nonetheless.

I love Chrome’s automatic updates

2011-09-25T00:00:00-06:00

Last night I signed up for Clicky Web Analytics, and looking around their site I saw that they offer market share stats for the major browsers (IE, Chrome, Safari, Firefox, and Opera,) both in general, and split by browser version. Looking at Chrome’s stats, I noticed something interesting in the graph:

Thanks to Chrome’s silent automatic updates, as soon as a new version is released, the previous one virtually disappears in a matter of days! I’m sure there are valid arguments against updating software automatically and silently, for example at organizations that need to control what software their employees use, or that need to test existing applications in new browser versions before deploying them; but from a developer’s point of view I think it’s awesome, because for all intents and purposes there’s only one version of Chrome – the current one. Since older versions aren’t a big concern, testing in Chrome becomes simpler and easier: there’s no need to hunt down and keep multiple versions for testing.

Compare to Internet Explorer, where the four most recent versions coexist, so if it represents a major portion of your visits (and it probably does,) then you’ll have to support at least two of them: Internet Explorer 8, for the large number of people still running Windows XP; and 9, for those running Windows Vista and 7. Unfortunately, unless dropping XP and Vista is an option, you’ll probably have to keep supporting them even after Internet Explorer 10 comes out, since it won’t support Windows Vista.

Safari’s market share behaves a bit like IE‘s, inasmuch as it doesn’t automatically update and the newest version coexists with the older one, but remarkably Safari 5.1 has already overtaken the previous version, just a month after its release with the launch of Lion. Still, until 5.0 is gone, testing in it might be problematic unless you have an older Mac nearby, or a Snow Leopard Server disc you can install in VMware Fusion or Parallels.

Firefox, meanwhile, behaves in a combination of both ways. After Firefox 4, which introduced automatic updates, it behaves like Chrome, with the previous version dropping off after a new release; but with a good number of users still on version 3.6, which didn’t have automatic updates.

And Opera… oh, who cares, I’m pretty sure Opera’s market share is composed entirely of developers testing their sites in Opera.

Anyway, knowing that I can stop worrying about testing in older versions of Chrome (and to a much lesser degree, Firefox and Safari) personally makes my job much easier, but as usual, your mileage may vary. Let your own browser stats be your guide.

Better infinite scrolling with the HTML5 History API

2011-09-22T00:00:00-06:00

Now that Piictu finally launched and is out of beta, I want to write a bit about one of my favorite things I worked on as the front-end web developer there, which is our implementation of an infinite scrolling page improved by the use of the HTML5 History API, the problem it tried to solve, and the solution we arrived at.

What’s Piictu?

A bit of background first. In case you haven’t tried it (and you totally should,) Piictu is an iPhone social photo app that revolves around the concept of “photo streams”, or threads of photos by different users on the same subject. For example, you can take a photo of a sandwich, start a stream titled “eating a sandwich”, and watch as your friends and followers reply with their own photos of their own sandwiches, or whatever they’re having for lunch. Check it out, there are some incredibly creative games and memes going on over there. It’s a lot of fun.

Since these streams could conceivably have hundreds of photos, and we wanted an uninterrupted photo-viewing experience, we immediately decided to implement each photo stream as an infinitely-scrolling page, instead of using regular pagination. However, this concept of streams of thematically-related photos defined one of the main requirements for the design: we never wanted to take a photo out of its context, which meant that when people shared them, we couldn’t have traditional permalinks with just the one photo. The challenge was to figure out the best way to allow a user to share any photo without taking it out of the context of its stream.

The problem with infinite scroll

I’m not a big fan of many sites’ implementations of infinite/endless scroll, and given a choice, I turn it off. Most times it just drives me nuts. For example, in most sites that use it, if my Internet connection goes out or there’s a server error or my browser crashes, I’m forced to start back at the top, which I find infuriating if I’m really deep down the page. Another problem is that I usually can’t bookmark my position, so if I leave and come back later, I’ll have to start over. So, in addition to the photo-sharing-on-an-infinite-page problem, I also wanted to tackle these issues, for a better user experience.

The old Ajax way

My first idea when tackling this problem was a traditional solution using Ajax and fragment identifiers, so we could start the stream of photos at an arbitrary point defined by storing the ID of the desired photo in a URL hash (e.g. /stream/123/#/photo/456.) Since anything after the hash (#) character, or fragment identifier, in a URL isn’t sent to the server, this would require passing the photo ID to the server using Ajax, and loading the correct photos in the sequence with JavaScript. To make sharing easier, I wanted the hash fragment to be updated with the ID of the photo currently in the viewport as the user scrolls up and down, so they could share it by simply copying and pasting the URL.

However, I had a few issues with this approach. The first obvious one was that it doesn’t degrade gracefully. If the visitor doesn’t have JavaScript enabled or an error prevents the JavaScript from loading, then the user will get a nice empty page – probably not the best experience. It also prevents the page from being crawled, not just by Google, but also by Facebook. When sharing or liking a page, Facebook determines what title, description, and thumbnail to display in the News Feed by crawling the page and looking for Open Graph tags, falling back to things like the <title> tag, description meta tags, and other images on the page. On a traditional permalink page like Instagram’s, it’s easy, just set the Open Graph tags with the metadata of the one photo in the page. But on a page with a multitude of Ajax-loaded photos, without the server knowing which photo is being requested (remember, the server never gets the hash fragment,) how do you set these tags? If Facebook can’t see that information for the photo being shared, it wouldn’t know what to display in the News Feed, undermining what we set out to accomplish in the first place, which was to make it easier for users to share the photos. As an up-and-coming startup looking to get traffic and exposure, this was a real deal-breaker, so I quickly scrapped this solution.

A better solution using the HTML5 History API

Instead, I decided to use the HTML5 History API. Instead of getting the ID of the photo currently in the viewport and using it to change the fragment identifier, I update the URL in the address bar by calling the replaceState() method. The basic idea is this:

Wait for the scroll event to fire. (Note that since the scroll event can fire a lot, for performance reasons it’s best to run any code attached to this event after a small delay, using a setInterval, as per John Resig’s recommendation.)
When the page has scrolled, get the ID of the top-most photo in the viewport. For this I used the Viewport Selectors jQuery plugin, which adds a handy :in-viewport selector. I also embedded the ID of each photo as a data-photo-id attribute in their markup, to make it easy to get with JavaScript.
If the browser supports the History API, use replaceState() to add the photo ID to the base URL of the stream page, or remove it, if it’s the first photo in the stream (i.e. if we scroll back to the top.) The reason I chose to use replaceState() (which updates the current browser history entry) instead of pushState() (which adds a new history entry) was because I didn’t want to have to click “back” a bunch of times and go back through every photo just to get to the previous page.

An abridged version of the JavaScript code used in Piictu looks somewhat like this (I removed some functionality that wasn’t really necessary for the History API explanation from the code, such as the actual infinite scroll implementation. I hope it’s clear enough):

$(window).scroll(function(){
    did_scroll = true;
});

// Every 250ms, check if the page scrolled
setInterval(function(){
    if (did_scroll) {
        updatePhotoPath();
        loadMorePhotos(); // Infinite scroll, etc.
        did_scroll = false;
    }
}, 250);

// Update the URL
function updatePhotoPath() {
    var new_url;
    var in_viewport = $('div.piic:in-viewport').first();
    if (history.replaceState) {
        if (in_viewport.hasClass('original')) {
            new_url = base_url; // The original URL of the stream page
        } else {
            new_url = base_url + "/photo/" + in_viewport.data('photoId');
        }
    history.replaceState('', '', new_url);
    }
}

You can see this in action by going to any stream on Piictu, such as this Hipstamatic stream I started a few months ago [NB: Piictu has been defunct for many years now, so evidently all these links are busted, but you can see the same effect on my photoblog, which uses a similar implementation.] As you scroll up and down, you’ll notice that the ID of the photo in the viewport is appended to the URL of the stream page, and when you return to the top, it’s restored to the original URL (the base_url variable in the source code, which is also saved in a data-* attribute in the markup for easy retrieval.)

So what happens on the server when we request a stream? If we request a plain stream URL, such as /streams/123, the server returns the first few photos normally, starting with the first photo in the stream. If we request a URL that contains a photo ID, like /streams/123/photo/345, the server again returns a few photos, but this time starting at the photo with the specified ID, with an option to load the photos above it, or scroll down to load more photos below. No need to use JavaScript to figure out which photos to show, it’s all returned directly from the server. Also, the metadata of the photo being requested is also returned as Open Graph tags in the <head> of the page, so when you post /streams/123/photo/345 on Facebook or Google+, they’ll show the correct thumbnail and caption for that photo. It solves our goal for the photos, which was to help users to easily share them: regardless of whether they use the sharing buttons next to each photo, or simply grab the URL from the address bar and paste it in an instant message or their favorite social network, it’ll just work.

It also alleviates some of my pet peeves with infinite scrolling. Since the URL updates automatically as you move up and down the page, you can easily bookmark your position, which is particularly handy on very long streams; and if for whatever reason you’re forced to reload the page or your browser crashes, you’ll start where you left off, avoiding the frustration of having to start over (assuming your browser reopens your tabs after a crash.)

Finally, it degrades somewhat gracefully, as it’ll show the appropriate photos even if JavaScript is disabled, since JavaScript isn’t necessary to figure out which photos to load. (I say “somewhat” because it doesn’t yet offer regular pagination as a fallback, but it’s on the to-do list.)

What about Internet Explorer?

As always, the biggest issue with using any modern technology is Internet Explorer, since in this case it doesn’t support the History API in versions 9 and below. I briefly worked on a workaround for IE, using the ol’ hash fragments as a fallback. In the end we simply decided not to support IE, mainly because between January and May, Internet Explorer accounted for only 2.42% of the visits to our signup and teaser page, so the added effort and maintenance it would require seemed counterproductive. In addition, our implementation degrades gracefully in IE. The URL may not change as the user scrolls, but everything else works properly and sharing photos is still possible, using the Twitter and Facebook buttons. In other words, it simply behaves as a traditional implementation of infinite scroll. Finally, it’s a temporary situation, as Internet Explorer 10 will support the History API, and it shouldn’t require any further work. I tested it in the Windows 8 Developer Preview, which includes a preview version of Internet Explorer 10, and it worked perfectly.

Conclusion

I really believe that using the HTML5 History API to augment infinite scrolling offers a superior user experience by alleviating some of the annoyances caused by traditional approaches, such as the lack of bookmarking and sharing. I expect this technique will be used more once Internet Explorer supports the History API, but if you’re willing to live without IE support for a bit (or use one of the many polyfills available,) it’s definitely worth giving it a try now.

Let me know what you think about this; I look forward to your comments and questions, even though I still haven’t gotten around to adding comments to this blog. In the meantime, feel free to tweet @gesteves or send me an email.

Hello, World

2011-09-19T00:00:00-06:00

After almost four years on Tumblr, I’ve decided it’s time to switch blog platforms. My blog now runs on Octopress and Heroku.

The reason I’m switching, and the reason I was using Tumblr in the first place, are a bit of a long story. I used to have a real blog, one I built myself in 2005 or so, when I was teaching myself Rails, and which I loved and updated frequently. However, a couple of years later, thanks to Venezuela’s foreign currency restrictions which forbid us from spending more than US$400 a year in electronic payments, having a self-hosted blog running on paid hosting – even cheap, shared hosting – became untenable. Back then I was spending $9 a month at Rails Playground to host my blog, which may not sound like a lot, but it added up to $108 a year – over a quarter of what the venezuelan government allows me to spend on the Internet in a year. So, in 2008, when Tumblr began to take off in popularity, I decided to cancel my hosting plan, scrap my blog, write a small script to import all my content, and switch to Tumblr.

It had the advantage of not having to worry about servers or hosting costs while being flexible enough to allow me to tinker with the code and design to my heart’s content, plus an amazing community that led me to meet some of the best friends I’ve ever had. However, in the past few months I’ve become quite dissatisfied with the service and the constant outages and downtime, like this recent, ongoing issue. I’m also a bit uneasy with the content I post over there, because it’s a strange mix of work/professional stuff and personal posts, reblogs, memes, and inside jokes that probably aren’t interesting to anyone except my close circle of friends. So I thought it would be better to have a place that’s just for serious business, and leave Tumblr for personal posts, socializing with my friends, and sharing photos of cats. All-Encompassing Trip will keep going at its new address, but this will be my primary blog for now.

As for my choice of platform, I chose Octopress after reading Matt Gemmell rave about it. I’ve always liked the idea of having a “baked” blog (i.e. one that’s entirely static HTML), and I’ve experimented in the past with things like nanoc, but Octopress makes it dead simple to set up, generate, and deploy a static HTML blog. If you’re considering starting a blog, and feel comfortable working in the Terminal, I can’t recommend Octopress enough.

There are plenty of advantages to the “baked” approach. Since there are no slow and expensive database calls, it’s blazing fast, lighter and more responsive, and it won’t fall down the first traffic spike it gets – not that I’m expecting to get fireballed or anything, but for me it also means that it’s lightweight enough that I can probably get away with running it with a single Heroku dyno for the foreseeable future – which makes it free. There’s also a security argument to be made, since there’s no admin interface to hack, or any chance of SQL injection. I also like that it makes backups really simple: the posts live on my computer, so they get backed up to Time Machine and SuperDuper as part of my regular backup process; my Sites folder is symlinked in my Dropbox folder, so there’s a backup there too; and since the posts are also under source control, everything gets committed to my Github repo as well. Finally, migration is trivial, because it’s just a bunch of static HTML files. Just put them on a new server and it’ll work. Octopress can even automate the process of copying the files to the server with rsync after writing a post.

A few other things of note:

The theme is mostly built from scratch, based on the design of my website. Unfortunately, I mostly destroyed all the sensible patterns and defaults Brandon (the creator of Octopress) created for theming it, so I think I’ll have to do some work rebuilding them to keep the code more organized. I did keep his awesome port of Solarized syntax highlighting, though.
I modified it for deployment to Heroku. This included, on Brandon’s instructions, removing the public folder from .gitignore, but I also added everything but the public folder and the config files to .slugignore, to keep the slug size as small as possible (it clocks in at 460 KB, vs. 4.4 MB for my website’s slug); and I added a rake task for Heroku deployment, which is mostly a copy of the default Github one, but pushing to Heroku master instead.
I wanted to use iA Writer as my blogging software, so I modified the new_post rake task so that it calls open #{filename} at the end, which opens the newly created post in the default editor for Markdown files, which I had previously set to Writer.
I also symlinked the _posts folder to the Writer and Elements folders in my Dropbox, so I can theoretically write posts from my iPad and iPhone, although I’d have to SSH into my computer to actually publish them.
I’m trying to simplify the process of creating new posts and deploying to Heroku, and integrate it better to the OS. I’m currently trying to figure out how to add the rake tasks to OS X’s Services menu, to make it easier to publish posts after writing them. I also replaced some of the puts calls in the Rakefile with calls to growlnotify, to get nice Growl notifications on successful deploys and whatnot.
I still haven’t decided whether or not I want comments here, or if I want to use Disqus or Facebook Comments. In the meantime, you can tweet @gesteves with any comments.
I didn’t import any of the old content from Tumblr; I couldn’t figure out a good way to do it without breaking a ton of links, since Tumblr’s permalink format doesn’t match Octopress’s. I thought about modifing Octopress’s permalinks and work something out using my local backup of Tumblr, but instead I opted for a clean break and a fresh start, using a bit of Sinatra code to 301-redirect any traffic looking for a Tumblr permalink to my Tumblr’s new domain.

Anyway, I’m not entirely sure how much or how often I’ll write here – Twitter & Tumblr seem to have atrophied my ability to write more than 140 characters at a time, and writing this post took longer than I care to admit – but I do hope to at least comment on interesting web design & development resources I find, in the style of Assaf Arkin’s “Rounded Corners” series – which I love – and maybe get back in the habit of writing well enough to, you know, express, like, opinions and stuff. Wish me luck, and thanks for reading.

Styling placeholder text in a form input

2010-04-28T03:27:00-06:00

If you’re using the placeholder attribute in a form input element, and want to change how the placeholder text looks using CSS, use the -webkit-input-placeholder pseudo-element, like so:

::-webkit-input-placeholder {
    …
}

The placeholder attribute works in the latest Firefox nightly, but if there’s a -moz extension to style it, I sure as hell can’t find it.

CSS glow effects with box-shadow

2010-03-26T00:00:00-06:00

If you’ve visited Twitter’s login screen lately in Safari, you might have noticed that the inputs have this subtle glow when they’re in focus:

I love the way it looks and I think it’s a really nice touch to add to a form, or any other elements you might want to highlight. And it’s easy, too. Here’s how you do it:

input {
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
}

What I’m doing here is using outline:none; to get rid of the default highlight that Safari shows when an input is in focus, and then I’m setting the transition property to tell the input to animate any change to its properties. Read the CSS Transitions draft to know more about the options you can use. Here, I set it to animate for 0.25 seconds, easing in & out of the animation. I’m also setting the same property with vendor prefixes for WebKit & Mozilla.

input:focus {
    box-shadow: 0 0 5px rgba(0, 0, 255, 1);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1); 
}

Now, when the user focuses on the input, I’m telling it to display a 5-pixels-wide box shadow with no offsets. Since the “shadow” is actually bright blue, it ends up looking like a glow. I’m also using RGBA so I can play with the opacity and make it more subtle if I want to. And again, I’m setting the same property with vendor prefixes so it’ll work with WebKit & Firefox. Since I set the transition property earlier, when the user focuses on the input, the box shadow won’t appear at once, and instead will be nicely animated. (Of course, if you want to apply this effect to other elements, you should target other pseudo-classes, like :hover.)

To make it look a bit nicer, I’m going to give it some rounded corners and a thinner border that will be highlighted when the input has focus:

input {
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border:1px solid rgba(0,0,0, 0.2);
}

input:focus {
    box-shadow: 0 0 5px rgba(0, 0, 255, 1);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
    border:1px solid rgba(0,0,255, 0.8); 
}

Here’s the result:

The Star Wars opening crawl in HTML & CSS

2009-11-29T00:00:00-06:00

I’m very proud of this technological terror I’ve constructed.

I’m done: the Star Wars opening crawl, built using only HTML & CSS. Caveats: It only works in Safari 5 and the WebKit Nightly. Nothing else supports the CSS and 3D transforms and animations I used (yet), but I just wanted to see if it could be done. Here’s how it works:

The first step is setting up the stage where the opening crawl will render:

body {
  background: black url("https://s3.amazonaws.com/csstarwars/background.png");
}

#stage {
  height: 600px;
  width: 1000px;
  overflow: hidden;
  margin: 0 auto;
  -webkit-perspective-origin: center 300px;
  -webkit-perspective: 800;
}

Most of it should be fairly self-explanatory: I’m setting a background image (the stars) on the body of the page, and defining a container of fixed dimensions for the crawl.

The critical properties here are -webkit-perspective-origin and -webkit-perspective. The former defines the point of view of the observer, making them watch from the horizontal center of the container and 300px down from the vertical center. The latter defines the distance of the observer along the Z axis. The actual values were a bit of guesswork to match the perspective seen in the movie.

Next up is the “a long time ago, in a galaxy far, far away” text, which is styled as follows:

#far-far-away {
  color: rgb(75,213,238);
  font-family: "FranklinGothicBookRegular", sans-serif;
  font-size: 48px;
  line-height: 1.5;
  position: absolute;
  top: 200px;
  left: 190px;
  opacity: 0;
  -webkit-animation: fade-in-out 6s linear;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
}

@-webkit-keyframes fade-in-out {
  0%   { opacity:0; }
  16%  { opacity:1; }
  84%  { opacity:1; }
  100% { opacity:0; }
}

I’m using the @-webkit-keyframes rule to fine-tune the effect of the text fading in and out, to closely match its appearance in the movie. Specifically, the entire effect lasts 6 seconds, with the text fully visible 16% in (about a second) and starting to fade out again at 84% (or 5 seconds in). The animation starts playing on a 5-second delay, and only happens once.

Now, this is where the fun begins: Animating the Star Wars logo, followed by the opening crawl. Unfortunately, there’s no “Star Wars” font I could use, so the logo is simply an image, animated like so:

img {
  opacity: 0;
  position: absolute;
  top: 100px;
  width: 1000px;
  -webkit-transform-origin: center center;
  -webkit-animation: logo 25s linear;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 12s;
  -webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes logo {
  0%   { -webkit-transform: translateZ(0);         opacity:0;  }
  0.1% { -webkit-transform: translateZ(0);         opacity:1;  }
  50%  { -webkit-transform: translateZ(-50000px);  opacity:1;  }
  60%  { -webkit-transform: translateZ(-60000px);  opacity:0;  }
  100% { -webkit-transform: translateZ(-100000px); opacity:0;  }
}

The logo animation is on a 12-second delay so it starts at the appropriate time, taking 25 seconds in total and playing only once. The keyframes are fine-tuned to replicate the movie, where it appears to fade in and accelerate quickly, and fade out slowly when the logo is way out in the distance (this took a lot of trial and error, as you can imagine).

As for the crawl itself:

#crawl {
  color: rgb(252,223,43);
  font-family: "FranklinGothicDemiRegular", sans-serif;
  text-align: center;
  font-size: 36px;
  opacity: 0;
  -webkit-animation: crawl 120s linear;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 16s;
  -webkit-transform-style: preserve-3d;
}

#crawl p.title {
  font-family: "FranklinGothicMediumCondRegul", sans-serif;
  text-transform: uppercase;
  font-size: 96px;
  -webkit-transform: scaleX(0.6);
}

#crawl p {
  white-space: pre;
}

@-webkit-keyframes crawl {
  0%   { -webkit-transform: rotateX(80deg) translateZ(200px) translateY(1100px);  opacity:1; }
  40%  { -webkit-transform: rotateX(80deg) translateZ(200px) translateY(-340px);  opacity:1; }
  80%  { -webkit-transform: rotateX(80deg) translateZ(200px) translateY(-1780px); opacity:0; }
  100% { -webkit-transform: rotateX(80deg) translateZ(200px) translateY(-2500px); opacity:0; }
}

Similar to the previous animation, I’m setting appropriate delay and duration lengths to ensure the crawl appears on the screen and disappears into the distance at the correct time. The key here is the translateY properties, which, combined with the perspective properties I had previously set on the container, ensure that the crawl’s vanishing point is in the correct place. The -webkit-transform-style set to preserve-3d allows me to rotate the crawl correctly in 3D space, and not have it be flattened on its plane.

And with that, the Star Wars opening crawl starts playing, and should match pretty closely the theatrical version. But there’s one thing missing: John Williams’s legendary score! Hilariously, despite doing everything else in pure HTML and CSS, we’ll need a single line of JS to ensure the music in the audio element on the page starts playing at the correct time, 12 seconds after the page loads:

setTimeout("document.getElementById('audio').play()", 12000);

(Update: I’ve removed the audio file to prevent any legal complications).

And that’s it! It’s pretty impressive how much you can accomplish these days with nothing but standards-based HTML and CSS. Here’s hoping these new CSS3 features make it to other browsers soon enough.

Update: After almost ten years hosting this on my website, I’ve moved it over to CodePen, go check it out there.

Blocking and reporting Twitter spammers with a shell script

2009-08-26T12:58:00-06:00

A simple shell script that blocks a Twitter spammer and sends a direct message to @spam to report it:

#!/bin/bash
curl -s -u USERNAME:PASSWORD -d "id=$1" http://twitter.com/blocks/create/$1.xml
curl -s -u USERNAME:PASSWORD -d "text=$1&amp;user=spam" http://twitter.com/direct_messages/new.xml

Replace USERNAME and PASSWORD with your username and password, obviously. It receives a single parameter, the offending spammer’s username, like so:

$ ./fuckyou.sh agibbs1984a

My script-fu is not that strong, so if you can improve this, I’m open to suggestions.

Start BitTorrent downloads remotely with Dropbox

2009-03-07T00:00:00-06:00

Here’s a quick way to start BitTorrent downloads remotely, if you’re using Dropbox. First, make sure Dropbox is installed in the computer where you regularly download your torrents, probably your main computer at home. For those not using Dropbox, you can get an account here. You’ll have to download a small application, which creates a “Dropbox” folder in your “My Documents” folder in Windows or in your “Home” folder in OS X. Dropbox keeps that folder synchronized across all the computers where you have installed it, so that if you move a file into that folder, it will show up on all the other computers. You can also access and upload files via Dropbox’s web interface.

Now, most BitTorrent clients have an option to automatically add torrents copied on a certain folder. In Transmission, it’s in preferences, in the “transfers” tab. Check the Watch for torrent files in option. Optionally, check the Trash original torrent files so your folder doesn’t fill up with old .torrent files.

In µTorrent, the option is in the preferences (the cog icon in the toolbar), under “directories.” Check Automatically load .torrents from and optionally, Delete loaded .torrents.

What you want to do is set those options to watch your Dropbox folder (or a folder inside your Dropbox, if you want to keep things tidy) for new .torrents, so they’ll start downloading automatically when a new file appears. Do not, however, set your client to save the resulting download into your Dropbox folder. Save them elsewhere.

Now as long as you keep Dropbox and BitTorrent running, you can start torrents remotely. All you have to do is upload .torrent files to the Dropbox folder from wherever you are, using the web interface, and it should start downloading almost immediately on the other computer. I started doing this at the office, because for some reason I can’t use Transmission’s web UI from there, and it’s worked for me without a hitch; by the time I get home, my downloads are usually ready. Give it a shot, and let me know what you think.

Bonus: Move your files and start Transmission with Automator

When I first wrote this last year, I forgot two critical issues. First, if I tell my computer to watch my Dropbox for torrent files, it means that when I’m at home I’ll have to move the torrent files there myself, or start the downloads manually, because by default they’re saved to the Downloads folder. That’s annoying. And second, if Transmission is not running, then saving the torrent files to Dropbox is not going to be of much help. Well, you can solve both problems in Mac OS X 10.6 with a couple of Automator folder actions.

Open Automator. In the initial “choose a template for your workflow” dialog, select “folder action”.
In the “Folder Action receives files and folders added to” dropdown at the top of the window, select your Downloads folder, or the folder where you have set your browser to save your downloaded files.
In the actions library to the left, select “Files & Folders” and add a “Filter Finder Items” action. Set the conditions to “file extension” “is” “torrent”.
Add a “Move Finder Items” action. Set it to move the files to the folder in your Dropbox you told your BitTorrent client to watch.
From “Utilities”, add a “Launch Application” action, and tell it to launch Transmission, or whatever BitTorrent app you use.
Save your workflow.

Your workflow should look like this:

When you download a torrent file locally, it will automatically move it to Dropbox, where Transmission will catch it and start the download. That takes care of the case where you download the torrent locally, but you need a second automator action to start Transmission when you add a torrent to Dropbox remotely:

Create another Automator workflow. Again, make it a Folder Action, but this time tell it to watch the second folder, the one inside Dropbox where you’re moving the torrent files.
In the actions library to the left, select “Files & Folders” and add a “Filter Finder Items” action. Set the conditions to “file extension” “is” “torrent”.
From “Utilities”, add a “Launch Application” action, and tell it to launch Transmission, or whatever BitTorrent app you use.
Save the workflow.

Boom. Done. Now, when a torrent file appears in your Dropbox, either because you uploaded it remotely or because the first Automator folder action moved it from the Downloads folder, your BitTorrent app will automatically launch and start the download.

Fixing Web Sharing after a Time Machine restore

2008-06-20T00:00:00-06:00

Has anyone had any problems lately with Web Sharing not working at all? Say, after restoring from Time Machine? I just noticed it a few days ago, but didn’t pay much attention; after all I just use the Mongrel bundled with Rails. But today I was checking the Console and noticed this:

Jun 20 12:18:46 Delta org.apache.httpd[11920]: (2)No such file or directory: httpd: could not open error log file /private/var/log/apache2/error_log.
Jun 20 12:18:46 Delta org.apache.httpd[11920]: Unable to open logs
Jun 20 12:18:46 Delta com.apple.launchd[1] (org.apache.httpd[11920]): Exited with exit code: 1

Crap. Of course. I remembered that a few weeks earlier I had replaced my PowerBook’s aging 80GB hard drive with a brand new 160GB one, and restored my Mac OS X installation with Time Machine. As James Duncan Davidson notes in his Restoring from Time Machine article, Time Machine automatically excludes a bunch of stuff like caches and logs, so Apache’s log directory is not recreated during a restore, and that caused it to crash and burn.

So, anyway, to fix it, just open up the terminal and type sudo mkdir /private/var/log/apache2. I hope this helps someone with the same problem.

Helvetica Neue Light

2008-04-08T00:00:00-06:00

Some of my recent visitors might have noticed that the current version of this site uses Helvetica Neue Light for almost all the text, a look inspired by the beautiful pages of Panic’s products. As reference, here’s a screenshot of part of CandyBar’s website:

Pretty, huh? After snooping around their CSS I saw they’re using the following declaration for the body text:

font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;

I thought this seemed like a slightly unusual way of declaring the font name. Why not just use “Helvetica Neue Light”? After a quick Google search I found that, as Josh Pyles and Steve Cochrane point out, Safari allows you to use a font’s additional weights by referencing their PostScript names — in this case, “HelveticaNeue-Light” — in your CSS; whereas you simply declare the font’s full name (“Helvetica Neue Light”) in your stylesheets to use it in Firefox 2 and other Gecko-based browsers like Camino. Thus, the following declaration will give you gorgeous Helvetica Neue Light in almost every Mac browser:

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", sans-serif;

Almost every Mac browser, except Firefox 3 and recent WebKit nightly builds, that is. Instead, you’ll get regular Helvetica Neue.

So what’s the deal? Why doesn’t this work in the nightlies anymore, when it worked in previous ones and in the shipping version of Safari? I thought it was a bug in nightly r31623, so I filed it and got a response from Philippe Wittenbergh, stating:

I believe the current (@ r31623) is correct. Per CSS 2.1:15 Fonts, the author specifies a font ‘family’ (e.g. Helvetica Neue). If you then want a specific face (e.g. ‘Helvetica Neue-Ultra-Light’) within that family you use the font-weight property, in this case font-weight: 100.

Which is absolutely correct: Firefox 3 and the recent WebKit nightlies are simply following the standard to the letter, and calling a font face by its full or PostScript name is non-standard behavior. Shame on me for not knowing the CSS spec better. So, the standards-compliant way of getting Helvetica Neue Light is:

font-family: "Helvetica Neue", sans-serif;
font-weight: 300;

For backwards compatibility, we can add both the PostScript and full names of the font to the declaration and end up with:

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;

To sum up, if you want to use a specific font face, you have to use font-family along with the font-weight property, calling both the PostScript and screen names of that face for backwards compatibility. Now go forth and spruce up your websites with some beautiful typography.

Pownce bookmarklet & activity

2008-02-29T01:38:00-06:00

What’s the first obvious thing to make with the new Pownce API Leah just announced? A bookmarklet to post links quickly to Pownce. Add this sucker to your bookmarks bar and Pownce away, my friends.

javascript:var%20a;if%20(window.getSelection){a=window.getSelection();}else%20if%20(document.getSelection){a=document.getSelection();}else%20if(document.selection){a=document.selection.createRange().text;}if%20(a==''){a=document.title;}location.href='http://pownce.com/send/link/?url='+encodeURIComponent(location.href)+'&amp;note_body='+encodeURIComponent(a)

If you’d rather use the activities feature of Internet Explorer 8, feel free to install the Pownce activity, which pretty much does the same thing as the bookmarklet. It’s also compatible with Firefox, courtesy of Michael Kaply’s activities extension.

Macintosh 512K

2006-06-23T00:00:00-06:00

Today I was in the car with my dad, and he’s telling me about the garage sale my family’s having at my grandmother’s house, and he mentions that my uncle brought a really, really old computer to the sale, and that he was about to sell it to some guy for about Bs. 40,000 (20 bucks, give or take). I asked him if he knew what kind of computer it was, and he said “an Apple”. “What kind of Apple?”, I ask, and he tells me that it’s one of the first ones. “Why? Do you want it?”, he asks me, and I tell him “sure, why not”. He calls my uncle, and he tells the guy that the computer had already been sold earlier.

So we drive over to my grandmother’s house to pick up the computer. It’s an Apple Macintosh 512K, circa 1984. According to the Wikipedia article,

The Macintosh 512K Personal Computer, the second of a long line of Apple Macintosh computers, was the first update to the original Macintosh 128K. It was virtually identical to the previous Mac, differing primarily in the amount of built-in memory, which quadrupled the original’s. This large increase earned it the nickname Fat Mac. The additional memory was significant because more ambitious users with computer experience stretched the capacity of the original Mac almost immediately, despite the limited number of applications.

It’s in pristine state, except for a slight scuff mark at the top of the computer, and the 20+ years worth of grunge. It even works perfectly! I have a whole stack of floppies (copies, unfortunately, instead of the original ones) with apps like MacPaint and MacWrite, and the original System Software, plus the original keyboard and one-button mouse (“hello, computer!”). There was also an Apple printer (I forgot to write down the model) at my grandmother’s house, but it was rather heavy and I don’t really have any place to put it, so I left it there in the meantime, and I told my family not to sell it.

Now I’m the proud owner of a great piece of computer history.

Update: I picked up the printer today, it almost broke my back… that thing must weigh at least 30 pounds. It’s an Apple ImageWriter I dot-matrix printer, model A9M0303. That’s all I know about it, so if you have any further info, please contact me. I also spent a few minutes checking out that stack of disks, and I found some good stuff, like two versions of Finder: System version 1.1 with Finder 1.1g; and another System software with a version of Finder number E1-5.3; a few games, including Hangman, Memory, Billiard, IAGO and On-the-Contrary; and A Guided Tour of Macintosh, which, among other things, explains in detail the use of that newfangled device called the “mouse”. I can’t imagine how alien that thing must have looked like 25 years ago.

Update (08/31/2006): Sweet, one of my pictures of the Macintosh has been featured on TUAW’s Rig of the Day. Go Digg it!

How to get a D-Link DWL-G650+ Wi-Fi adapter to work in Ubuntu Linux 6.06

2006-06-08T00:00:00-06:00

A few days ago I installed the latest version of Ubuntu Linux (version 6.06, Dapper Drake) on my old Compaq Presario 1200 laptop. The installation went smoothly, and Ubuntu runs beautifully, considering it’s an old 800MHz Celeron. Except for one small issue: My D-Link DWL-G650+ 802.11g cardbus adapter wouldn’t work. The status LEDs would come on, and the adapter was properly detected by the OS, but I couldn’t manage to get an IP from the router. After looking around in Google for a few minutes, I found this website, which explained that:

As in the summary, acx111-based d-link dwl-g650+ does not work with the default firmware. It works with 1.2.1.34 (tiacx111c16) - this is the firmware recommended (as the better of the only two working) on acx100 development website - see http://acx100.sourceforge.net/wiki/Firmware

According to the comments section in that page, there are a few ways to fix this, and I’m going to describe two of them. I’m writing this mostly as a reminder for myself since I’ll probably have to do it again next week after I replace the 10GB hard drive in the Compaq with a new 60GB one, but I thought this might be useful to somebody else.

Solution 1

This first solution involves deleting tiacx111c16 from /lib/firmware/[kernel version]/acx/default, which links to /lib/firmware/[kernel version]/acx/2.3.1.31/tiacx111c16 (the broken firmware), and replace it with a link to /lib/firmware/[kernel version]/acx/1.2.1.34/tiacx111c16 (the working one). To do this open a terminal window and type:

sudo rm /lib/firmware/[kernel version]/acx/default/tiacx111c16

Replace [kernel version] with your kernel version, obviously. The system will ask you for your password. Enter it. Now type:

sudo ln -s /lib/firmware/[kernel version]/acx/1.2.1.34/tiacx111c16 /lib/firmware/[kernel version]/acx/default/tiacx111c16

Eject the card, reinsert it, and that’s it. It should be working properly now.

Note: To find out your kernel version, type echo uname -r at the terminal.

Solution 2

I think this solution is easier, but you’ll have to reboot your PC. Again, open a terminal, and type:

sudo pico /etc/modprobe.d/options

Your system will ask your password; provide it. Now add the following line to the file you’re editing:

options acx firmware_ver=1.2.1.34

Press Control+x to exit, and press Y to save the changes. Reboot the computer, and you’re done.

I think that’s it. Feel free to comment if you have any observations or corrections to make.