Traffic peaked at 14,000 visitors the day it hit Hacker News, then trailed off:

I particularly enjoyed the new “Live Analytics” feature on Google Analytics, which shows you who’s on your site right now:

In the end, 40% of our traffic came from Facebook, 39% from Hacker News, 10% from reddit, 7.5% from Twitter and 3% from Google+. In other words, things started on Hacker News but wound up spreading through other social media.

The traffic spike was exciting, but also a bit sad. OldSF is fundamentally a read-only site, which makes it hard to keep people coming back. Raven and I did some brainstorming and decided to start tweeting “pictures of the day” on @Old_SF. Please follow us!

Locations like the Sutro Baths can have hundreds of photos. The slideshow lets you flip through them quickly.

As so often happens, what looked simple at first became more and more complex as I implemented it. Here’s how that process went for the OldSF update.

It started with Raven’s mock of the feature:

I started by looking for a JavaScript library that could do most of the heavy lifting for me. Raven’s mock shows a single big image in the center with bits of the previous and next images visible on either side. After finding lots of “slideshow” libraries that weren’t quite right, I realized that what I really wanted was called a “carousel”, not a “slideshow”. After making this conceptual breakthrough, I quickly settled on jCarousel.

The slideshow/carousel was barely in place before I ran into a new problem: the images kept shifting out of place! The issue is that jCarousel lays out all the images in your slideshow in a big long line, like so:

Most of the images are off-screen. To change the “active” image, jCarousel slides the whole strip to the left or right. To save bandwidth, I try not to load images that you’ll never see. An image only gets loaded when it appears on the screen. Before it loaded, I had no idea what its width was. The long strip of images really looked like this:

If an image turned out to be wider than expected, then the browser would push all the later images farther to the right, like so:

This wreaked havoc on the carousel’s layout. It could budge the center image all the way off the screen!

At first, I told jCarousel to redo its layout whenever a new image loaded. This mostly prevented the budging, but it had a nasty side effect. Images typically get loaded when you scroll through the slideshow. This scrolling is animated. But if jCarousel redid the layout, then the animation would suddenly stop and the motion would look very janky. My first thought was to prevent the relayout during animations, and this is what I did for our initial “launch”. But a few days later, Raven told me that she wasn’t consistently seeing the correct image when she copy/pasted links to the slideshow. The layout issues weren’t gone!

The source of all this complexity was the images in the slideshow with unknown widths. So the cleanest solution was to make them known! I added image width and height to the database and propagated them through to the client. This meant that the layout never had to change when an image loaded. Using the same schematic as above, the carousel looked like this:

With the layout fixed, all the hacks I’d written melted away and the slideshow links turned rock solid.

Another surprisingly tricky part involved moving the Google Maps navigation controls. In our new UI, the map uses the full window. The logo, date range selector and right-hand panel “float” above the map. When I first implemented it, I saw the mess you see to the left.

Uh-oh! I assumed this would be easy to fix—just shove the Google Maps navigation down a bit. But Google Maps doesn’t expose any CSS classes for its controls, so this turns out to be quite tricky. With some help from the API docs and this StackOverflow question I learned that the only way to do this is to create a small, invisible custom maps control which shoves all the other controls out of the way. Sheesh. The invisible control is outlined in this image:

Another fun issue came up with Street View. Having Street View on OldSF is quite useful, since it lets you do “now and then” comparisons. But when we went to the full-screen map layout, we ran into this annoyance:

That “x” button in the top right corner is the only way to get out of street view, and it’s covered by the right-hand panel. You’re stuck! The solution here was to find the events corresponding to entering and leaving Street View. When you go into Street View, we hide our UI elements. When you leave, we show them again. Raven has suggested that it’s nice to still see the images, so in the future I may just shove the right-hand panel down a bit or provide my own exit button.

Those were three of the most interesting issues I ran into while creating this new feature. There were many, many more. Nothing is ever so simple as it seems!

It was a total whiteout on the Golden Gate Bridge, but as soon as I got to the north bay, it cleared right up. I went back into the fog for the ~800 foot climb up Hawk Hill before breaking through and getting some amazing views from the top:

I saw a fighter plane zoom into the city, which made me briefly think that it was Fleet Week. Not so! (It’s in October.)

The ride down the back side was misty, beautiful and frighteningly slick. All in all, I left at 7:40 and got into work with a change of clothes right around 10.

One more view from the top:

SimCity 2000’s Plymouth Arcology

The de Young Museum’s observation tower.

The analogy struck me when I saw the de Young Tower from the aptly-named Grand View Park. Maybe the resemblance isn’t quite so clear as it was in my mind.

Also, arcologies? Anyone want to hazard a guess what fraction of people familiar with the term learned about it from SimCity 2000? I’m going to say 99.

Here they are. I’ve been to the bolded places. The links go to Yelp.

Within one block (3/4):

1. Cafe du Soleil
2. rotee (Indian)
3. S&W Market
4. Two Jack’s Seafood

Within two blocks (8/13):

1. Chili Cha Cha’s Thai Food
2. Cu Co’s Restaurant
3. Estela’s Fresh Sandwiches
4. Indian Oven
5. Kate’s Kitchen
6. Lo-Cost Meat and Fish Market
7. Metro’s Caffe
8. Nickie’s (bar)
9. Roland’s Bakery
10. Squat & Gobble
11. Thep-Phnom (Thai)
12. Three Twins Ice Cream
13. Volare Pizza

Within three blocks (12/23):

1. Abe’s Market
2. Bistro St. Germaine
3. Burger Meister
4. Cafe International
5. Castro Coffee
6. Golden Natural Foods
7. Hanabi Japanese Restaurant
8. La Carreta Taqueria
9. Love ‘n Haight Deli & Cafe
10. Mad Dog in the Fog
11. Memphis Minnie’s
12. Molotov’s (bar)
13. Mythic Pizza
14. Naan and Chutney
15. Noc-Noc (bar)
16. O’Looney’s Market
17. PeaCock Lounge (bar)
18. Raja Cuisine
19. Rosamunde (“the sausage place”)
20. Tacqueria El Castillito
21. Toronado (bar)
22. Uva Enoteca
23. Whole Foods Co

Now that I have a list, there’s no excuses!

I plugged in my cross streets on the San Francisco Library’s digital photo archive and found this picture. The image is mislabeled. The street in the foreground is actually Fillmore, not Webster. Which means that this photo, from 1945, was taken from my roof!

This past weekend, Miriam and I did a Now and Then shot. There’s a higher-resolution image there, but you can fade between them using the slider here:

1945

2008

There are more trees now, more cars and more power lines, but one less cable car. But the coolest difference is only noticeable if you look at the tall building in the upper right. It hasn't shrunk. No, the trees in Buena Vista Park have grown!

I’ll post pictures when the move happens after September 1. For now, you’ll have to settle for maps. Here are the places that are twice as close to my new place as my old:


View Larger Map

That includes:

• Buena Vista Park
• Alamo Square
• The Panhandle
• All of the Mission

For comparison, here are the places that are two times closer to my old apartment:

View Larger Map

Most of that is underwater. It even includes a piece of Alcatraz!

The images offer a fascinating tour of San Francisco history, from Chinatown in 1952

to hippies on Haight street in 1967:

The real coup, though, is to find an image of your own block or apartment from the photographic past. To that end, I’ve put the Cushman images which include a street address on a Google map. There aren’t any pictures here from my block, but maybe you’ll be luckier! Here’s the map:

View Larger Map

If you catch the old photo bug, the San Francisco Historical Photograph Collection is another great place to look. Here’s a photo I found of my block in 1926:

Just look at those cars!