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+.
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+.
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
26 February 2010
At the beginning of 2006 Erik and I started a 20% project to write a JS library for Google. Today it is used by many projects within Google and was recently open sourced.
On its own, the Closure Library isn’t very compelling for the average web developer. The dynamic loading is intended for unit tests and development, and using it in production would cause users to download masses of unused code.
Luckily for us, the Closure Compiler was open sourced at the same time. The compiler knows about a lot of the idioms used in the Closure Library and does a really good job of removing dead code and optimizing what remains. The team also launched a web service with a RESTful API so you don’t even have to run the compiler yourself.
Even with the web service, the development-debug cycle isn’t ideal. So when I found myself wanting to use some of the Closure Library for my new photo site I hacked together a PHP class that provides a convenient interface to the compiler web service, caches the optimized code, and recompiles when the sources have changed. Pretty basic, but quite useful I think.
I know PHP is looked down upon by many programmers, but it is easy, convenient, and widely available. If you have a PHP based site and want to use the Closure Library and/or the Compiler, it might be worth heading over to the project page and seeing if it might be useful.
15 May 2008
Mark Pilgrim’s project to document the web launched today as DocType. This is a really great resource, with topics ranging from security to cross browser DOM wrangling, and it’s only going to get better as it is completely open.
A lot of the example JS code is based on the project Erik and I started, and some is available for download from the SVN depot.
17 December 2007
Microsoft released their GC patch to the JScript engine on automatic update, if you didn’t get it and ever use IE, even for testing, I recommend downloading it. See my post from March on the problems with IE6 GC.