Finding Burgers Fast: My DIY Halifax Burger Week Site
Feb 23, 2018 12:55

Every year in late March, restaurants in Halifax get together and put on Halifax Burger Week. Every restaurant has its own take on what a burger should be, from vegan and international-themed burgers to solid heart-stopping classics. There are even burgers where the money raised is donated to charity. All in all it's a fun event, especially since it's right in the middle of Halifax's bleak "oh God will this winter never end?!" season.

The official Burger Week website is a typical modern WordPress-based promotional site - which means it's heavy on large images, JavaScript-based special effects, and lots of plugins and external resources for ad tracking and the like.

The response from at least the design and tech people I follow in Halifax has been ... underwhelming. Here's some of what showed up on Twitter after the site went live (follow the thread to see more - but watch out for some harsh language!)

Like so many promotional sites these days, it seems to have forgotten that the web should be about easily finding information - and that we solved the "displaying information in a formatted manner on a page" back in the 1990s without using megabytes of JavaScript and hijacking the native user interface for special effects - special effects which soon become much less "special" and much more "annoying".

The biggest problem for me, though, has been that the site is so busy showing off that it forgot to have a quick easy way to simply find the burger you want, especially if you're out and about and using your smartphone. The site is fine for browsing but it's really terrible for finding.

So for the third year in a row, I've built my own fast, light, mobile-friendly, and searchable burger week listing site.

The first year I did this it was a full-blown Ruby on Rails app with a database back-end, but the latest version is just a single page of HTML with some JavaScript and CSS and one small branding image at the bottom. The main feature is a search field which, as you type, filters the listing to only include matches. This lets you quickly find 'bacon' or 'vegan' or 'gluten-free' or look for a specific restaurant or even just a street name like 'argyle' or 'gottingen'. This search feature took 6 lines of JavaScript.

The first year I ended up doing a lot of copy-paste and formatting from, if I recall correctly, a PDF of the official brochure guide. This year I discovered that the official site's map page has all the location details stored in a single big JS variable, which I adapted with some search-replace into something more useful for a plain listing.

The official burger week home page is 2.3 megabytes split into 119 requests and on my fast home fibre connection loads in about 2 seconds. The directory listing page, with all the pictures and details, is 6.3 megabytes in 223 requests and loads in about 3 seconds.

My unofficial site is 106 kilobytes in 10 requests and loads in about 0.3 seconds. This includes a JS library, some custom fonts, and Google analytics.

So while my listing isn't as pretty as the official one, it's about 1/60th the size and loads in 1/10 the time, and more importantly is a whole lot more useful for the very common use case of wanting to find a suitable burger near you.

I'm a big believer in "punk rock software" - i.e. skip the vast intricate architectures and heavy loads and just get 'er done quickly. Focus on impactful results in the quickest time possible, like a 90-second song from the Ramones.

(To bring this all full circle, an early use of the term "punk rock" was rock journalist Lenny Kaye describing The Stooges' first album in 1969 as: "the music of punks. It`s about cruising for burgers in your car" - so if you're cruising for burgers in your car like a punk, you might want to use this punk burger guide.)

Previous:
"This is Nowhere" at PodCamp Halifax 2018
Feb 04, 2018 19:10
Next:
This Is Nowhere: Finding My Duck
Oct 08, 2018 17:57