danvk.org » san francisco http://www.danvk.org/wp Keepin' static like wool fabric since 2006 Thu, 09 Oct 2014 15:59:51 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 OldSF Buzz! http://www.danvk.org/wp/2013-01-27/oldsf-buzz/ http://www.danvk.org/wp/2013-01-27/oldsf-buzz/#comments Mon, 28 Jan 2013 04:21:10 +0000 http://www.danvk.org/wp/?p=1011 After its recent update, OldSF got an unexpected surge of traffic after appearing on Hacker News and reddit San Francisco.

Traffic peaked at 14,000 visitors the day it hit Hacker News, then trailed off:
Traffic jumping to 14,000 visits/day, then fading away.

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

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!

http://www.danvk.org/wp/2013-01-27/oldsf-buzz/feed/ 0
Developing the OldSF Slideshow http://www.danvk.org/wp/2013-01-21/developing-the-oldsf-slideshow/ http://www.danvk.org/wp/2013-01-21/developing-the-oldsf-slideshow/#comments Tue, 22 Jan 2013 02:21:10 +0000 http://www.danvk.org/wp/?p=972 If you head over to oldsf.org, you’ll find a sleek new UI and a brand new slideshow feature. Here’s the before/after:

OldSF "expanded image" view before update.   oldsf-after

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:

Raven's initial mocks for the OldSF slideshow.

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:

Long strip of photos with with one visible

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.

Google Maps navigation and OldSF logo overlapping 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:

Layout fixed using an invisible control.

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:

The Street View close button is covered by the right-hand panel of images. 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!

http://www.danvk.org/wp/2013-01-21/developing-the-oldsf-slideshow/feed/ 0
Morning Headlands Ride http://www.danvk.org/wp/2009-09-12/morning-headlands-ride/ http://www.danvk.org/wp/2009-09-12/morning-headlands-ride/#comments Sat, 12 Sep 2009 17:07:28 +0000 http://www.danvk.org/wp/?p=592 On my way in to work Friday morning, I took a detour via the Marin Headlands:

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:

Top of the World

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:
View from Headlands

http://www.danvk.org/wp/2009-09-12/morning-headlands-ride/feed/ 0
SimCity 2000 and the de Young http://www.danvk.org/wp/2009-06-14/simcity-2000-and-the-de-young/ http://www.danvk.org/wp/2009-06-14/simcity-2000-and-the-de-young/#comments Sun, 14 Jun 2009 22:26:21 +0000 http://www.danvk.org/wp/?p=489 Plymouth Arcology

SimCity 2000’s Plymouth Arcology

de Young Tower

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.

http://www.danvk.org/wp/2009-06-14/simcity-2000-and-the-de-young/feed/ 2
Close to Me http://www.danvk.org/wp/2009-05-25/close-to-me/ http://www.danvk.org/wp/2009-05-25/close-to-me/#comments Mon, 25 May 2009 18:44:36 +0000 http://www.danvk.org/wp/?p=481 While walking around my block with an out-of-town friend the other day, I found myself pointing out all the restaurants I had never been to. How could I be so remiss? Part of it is the sheer number of food places: 40 within a three block radius.

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!

http://www.danvk.org/wp/2009-05-25/close-to-me/feed/ 2
Now and Then http://www.danvk.org/wp/2008-12-02/now-and-then/ http://www.danvk.org/wp/2008-12-02/now-and-then/#comments Wed, 03 Dec 2008 06:06:02 +0000 http://www.danvk.org/wp/?p=356

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:


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!

http://www.danvk.org/wp/2008-12-02/now-and-then/feed/ 10
Another move! http://www.danvk.org/wp/2008-08-20/another-move/ http://www.danvk.org/wp/2008-08-20/another-move/#comments Thu, 21 Aug 2008 04:16:03 +0000 http://www.danvk.org/wp/2008-08-20/another-move/ A year after making my last move, I’m doing it again! This is less of a dramatic shift. Whereas the last one was a 35-mile move from Mountain View to San Francisco, this is a 2 mile move between neighborhoods in the city (Russian Hill to Lower Haight).

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:

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!

http://www.danvk.org/wp/2008-08-20/another-move/feed/ 1
Faded Photos of San Francisco http://www.danvk.org/wp/2008-08-18/faded-photos-of-san-francisco/ http://www.danvk.org/wp/2008-08-18/faded-photos-of-san-francisco/#comments Mon, 18 Aug 2008 17:29:05 +0000 http://www.danvk.org/wp/2008-08-18/faded-photos-of-san-francisco/ Richard over at Sparkletack recently wrote about the Charles Cushman Photograph Collection, which includes hundreds of pictures of San Francisco from the 1930′s to the 1960′s.

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!

http://www.danvk.org/wp/2008-08-18/faded-photos-of-san-francisco/feed/ 3