Photos from one of my favorite places on the planet:
Redesign
21 December 2011
I recently redesigned this site with the primary goal of improving my photography portfolio. If you don’t care about web dev you can stop reading now and just go take a look at the photos. Let me know what you think.
Ok, so here are some tech notes on the implementation, though this is all pretty standard these days.
For the photos page I wanted to make use of the HTML5 History APIs. But rather than make the photo page standalone I decided to “Ajaxify” the whole site. The site dynamically loads content, avoiding full page loads, using similar patterns to the ones we employed in Gmail and Google+.
If you navigate directly to a certain page it will be rendered on the server. Once the page has loaded, the JavaScript will listen for clicks, intercept any links that can be handled client side, request the page contents via an XMLHttpRequest, update the UI, and change the browser location using history.pushState. For all pages except the photos page, the XHR simply requests the page with ?mode=body which tells the sever not to render the chrome.
This was made simpler by the fact that I’d already written a small library (Surface) that does all the heavy lifting and simplifies the management of single-page applications. The trickiest part was getting WordPress to work properly and unfortunately meant changes that will need to be reintegrated after every WordPress update.
The photos page is all rendered client-side and simply requests the photo data from the server. The photos are stored on Flickr and I actually use the Flickr API to get the list of photos for each album rather than hard coding them.
The top navigation uses Raleway from the Google Web Fonts archive.
The site works best in the latest Chrome and Firefox builds, but IE degrades to using full page navigations, though the photos page only works in IE9+.
Flixtractr
6 November 2011
If you look at my stream over on Google+, you may notice that I’ve been uploading a bunch of old photos recently. They were all previously on Flickr, and while I plan to continue uploading single photos there, I prefer G+ as a venue for albums of photos.
The transition across wasn’t as simple as I would have liked. Even though I keep a backup of all my photos, I haven’t been good about keeping titles, meta-data, and sets in sync over the years. So I wanted a way to download a set of photos from Flickr and re-upload elsewhere. There were a few existing ways to do this, but they were either hacky scripts, installable apps, or required plug-ins. I wanted something web based. So in the end I wrote my own tool.
The result is Flixtractr, a little web app for downloading sets of photos from Flickr as a zip file.
Since the original photos can end off being quite large doing the zip building server side would have required a large amount of transient storage for any moderate number of concurrent users. I decided instead to build the zip on the client. I tried several different paths, but ended off using the new Blob and BlobBuilder APIs available in the latest builds of Chrome and Firefox.
Using Chrome 16 I’ve managed to generate a 650MB zip file containing a set of 97-photos ranging in size from 3MB to 11MB (some older versions of Chrome are known to crash when the zip exceeds 128MB). I’d probably recommend you avoid such big sets though :)
If you try it, let me know how it goes. If there are problems or you have feature requests, post about it on the Google Group.
[Update: if Flickr says "oops" when you try to connect. Wait about 15s then refresh the flickr page. There seem to be some reasonably wide-spread problems with Flickr OAuth. There's a thread on the Flickr API group discussing the problem.]
Web Audio Tone Generator
3 October 2011
Recently I was playing with the new Web Audio API. While there are a bunch of examples on the Chromium site, they are rather more complex than you want in a hello world sample. So for posterity here’s a super simple tone generator that uses AudioContext#createJavaScriptNode and the onaudioprocess handler.
66
11 June 2011
I only seem to be posting about Triathlons these days. Guess I’m not doing much else, other than working and using my new camera.
Anyway, today–in accordance with my yearly resolutions–I entered the Silicon Valley Long Course Triathlon.
At 66-miles long, the course is a few miles shy of a half iron man:
The swim is 1-mile, but two laps. So you have to run out of the water, sprint down the beach, and dive back in. The horizontal-vertical-horizontal transition nearly made me barf. This leg took under 30-mins.
The bike is 56-miles, and takes you all the way to Gilroy and back. It’s a pretty flat ride so most of the time was spent in aero-position which I’m not yet used to. I really didn’t feel like eating on the ride, so had to force down my power bars. Other than that it was a smooth ride and took around 2-hours 40-mins.
The run is 9-miles and flat. My right foot was completely numb for the first 2-miles. I was averaging between 7:30 and 7:45 min/mile splits, which isn’t too bad after the ride and considering it was only the 2nd time I’d run that distance since the San Jose half-marathon last year. My time was about 1:10.
The official results aren’t online yet, but my overall time was 4-hours 21-minutes. I wasn’t really sure what to expect, but had estimated around 5-hours. So, not a bad first time. It wasn’t as cardiovascularly intense as the Olympic distance events but I certainly feel more exhausted afterwards. 70.3 next??
Wildflower 2011
1 May 2011
I’m sitting on the couch, back in SF, with burning legs and a glass of Mumm Demi-Sec.
At the beginning of the year I set myself the stretch goal of getting a 2:20 time in the Wildflower Olympic Triathlon. I knew it would be almost impossible, but wanted an ambitious target. This morning I ended off finishing in 2:25:50; which I’m really happy with and is about 14-minutes faster than last year’s time. I give myself a 0.8…
The time put me at 61st (of ~1800) overall and 17th (of ~200) in my age group. My bike was definitely the strongest stage (34th overall) and is the main reason I got the position I did. My swim (404th) and my run (238th) were distinctly worse off. Got some work to do there.
It was a fun weekend “camping” (we rented an RV) down by Lake San Antonio. Even my parents — who are visiting from England — came by and cheered us on.
Photos to come when I’m more recovered.
NB: Results -
Swim: 00:25:25
Transition 1: 00:02:06
Bike: 01:11:27 (21 mph avg.)
Transition 2: 00:01:02
Run: 00:45:50 (7:23 min/mile avg.)
Total: 02:25:50
