Post-Mortem: Real-Time Fridge Poetry in Just 48 Hours 16 March 2014

Helvetica Cardigan is an implementation of the popular ‘fridge poetry’ curio.

It was completed in 48 hours during the Node Knockout 2012 coding contest by myself and Le Roux Bodenstein. The name comes from one of the combinations we made with the default ‘hipster ipsum’ wordset. You can add your own fridges with your own words too.

Although it was finished back then, I spent some time cleaning it up last night to make it a bit more interesting to blog about. Primarily I added the ability to embed it into other pages, and improved tablet support.

There is a bug which causes node to crash at the moment. I have set up a cronjob to reset it every few minutes until I have a moment to debug it properly

It has been released under a MIT license and the source is available on GitHub.

Read more →

From The Trenches: CDN-hosted JavaScript Represents an Additional Point of Failure 15 March 2014

This is the first in a new series of articles on painful lessons that I have learnt from real problems I have faced in the past. This is an effort to stop future generations from running into the same mistakes, or at the very least, it will give them something to find via google when they get stumped.

Since I’m still busy collecting my thoughts on why I was afraid of angular, specifically illustrating what about the inferred dependency feature worries me so much, I decided to take a break from the topic to start publishing some of my war stories.

Read more →

I Was Wrong to be Afraid of Angular.js 12 March 2014

Last week the startup I have been working for started wrapping up due to lack of funds. It’s not been unexpected, so I’ve kind of put the week aside to try being ‘funemployed’.

It has given me the time to catch up with old friends, do a little bit of writing, but also to spend some time processing everything that’s happened over the last few years.

I was finally writing the announcement for a project I built on a whim a few months ago, but when I tried to justify why I had chosen to use Angular.js specifically on that project I came to a deeper realization.

Read more →

Mirror Tumblr Picture Blogs with Browsr 07 March 2014

Browsr is a simple demo application I built as a learning exercise over the period of a few weekends.

While a lot of the features are only just functional enough to consider them as having been implemented, I was still quite happy with how it turned out, and the amount of practical experience I gained was quite significant.

Since I don’t really have the time to commit to maintaining the app, I was originally going to keep it to myself until I realized it would be a good thing to add to my online portfolio.

browsr

Main Features

  • Downloads and mirrors the photos on tumblr blogs locally.
  • Provides a photo mosaic interface to navigate through them.
  • Rate images 1-5 stars to keep track of your favorites.
  • Allow faceted search on metadata (such as tags).
  • Infinite scrolling or paged view modes.
  • Keep track of images you have seen, only showing new ones.
  • Rudimentary tablet support.
Read more →

A Subtly Meta Introduction to Browserify 06 March 2014

I built these slides for a presentation on Browserify I gave at a Node.js Cape Town user group meetup recently.

To make it a little bit more interesting, I used browserify to build the slides themselves. I then used browserify to pull in the code that it built back into the slides to use it’s own code for the examples!

You can find the browserify slides, and the code used to generate them on my github account.

browserify introduction slides

Build Tools

As the slides progress the entire thing becomes more complex with various levels of transforms and clever trickery. At some point the code even switches entirely to coffeescript (because typing yaml is easier than json).

I used a variety of packages from places like bower and npm, and I used grunt to automate the entire build process. If I were to do it over today, I would definitely be using gulp instead, since it’s just so much closer to how I instinctually perceive a lot of these tasks (streams all the way down).

Other Tools

Disc is a tool that visualizes the module tree of the bundle generated, allowing you to catch files that might have been included in error, and it is definitely my favorite slide in the deck.

I used Impress.js and a couple of other libraries to make it look nice. Impress was especially fun to mess about with, as it presents you with a css3d virtual space to distribute your slides on while it zooms between them.

It really tickled my inner yak-shaver to the point where I spent an embarrasing amount of time building a functional transition api that would allow me to distribute the slides based on a formula. Basically I wanted to tell the slides to ‘do a barrel roll’.

Read more →