BSprites: Combined web assets using Typed Arrays and Data URIs

Disclaimer: This was a weird idea I had one day and put this together the same evening. I’ve not tested it cross-browser or in a production environment. I’ve not benchmarked this either vs actually downloading all the images. It’s kind of a ‘what if’ project at the moment. If you think it’s really dumb or cool, I’d be really interested to hear your thoughts. Generally, whenever a browser loads a new image, it will make a new HTTP request to the server.

Express to Hapi.js

This isn’t an X is better than Y post. I love Express, I still think it’s a really great module and I’ve used it successfully in many projects. That being said, I’m hearing good things about Hapi.js (referred to as Hapi from hereon in) recently which is another HTTP server framework for Node.js. So I figured it was time to check it out. As most people who I imagine come to Hapi, I have experience with Express and I’m wondering how it differs.

Keeping on top of invoices with the Freshbooks API and Ruby

Freshbooks is a great tool as a freelancer, for managing your billing and sending invoices. It is however lacking in a few places for me. One thing I really want to see when I log in is how many days have elapsed since I sent each invoice out. Yes I could work this out from the dates, but I don’t have the time quite often so things start slipping. Luckily there’s an API we can use, and I knocked up this Ruby script in 10 minutes to give me a nicely formatted view of all my active invoices and the days since I created them.

Building a complex web component with Facebook's React Library

Edit (12-2016): This article has been updated for React 0.14 and ES2015 React looks set to be the hot front end technology of 2014 with some even calling 2014 the Year of React. So I thought I’d introduce it with a tutorial and hopefully learn something myself too. Here’s what we’ll be building: I’m going to show you how to create a complex, interactive web component with React. To this end, I will be creating a 5 band resistance calculator.

Perfect web audio on iOS devices with the Web Audio API

TL;DR A lot of the restrictions imposed on the HTML5 audio element by iOS can be overcome by using the Web Audio API. If you’ve ever built a web based game that requires sound effects, you’ve no doubt felt the frustration of getting what is trivial to implement on desktop browsers to work smoothly on iOS devices. Initally the obvious way to implement audio is to use the HTML5 <audio> element.

Capturing infrared packets with Arduino and plotting them with HTML5 canvas

I had an old DVD player lying around that wasn’t working anymore so I stripped the infrared sensor from it (Note this is not a standard IR phototransistor/diode, it has a modulated, logic-level output). I found the fantastic Arduino-IRremote library by Ken Shirriff. This library abstracts away all the processing you need to start getting commands from your remote. It also has decoders for the most popular IR protocols which will strip out any signal headers and return just the data bits.

Hacker News in your terminal!

If you’re anything like me, you visit Hacker news at least 4 times a day and you spend a lot of time in the terminal. I usually open the Hacker News site in my browser and decide if any of the headlines catch my attention, I thought it would be cool if I could see a summary of the new featured posts in my terminal and only open them in a browser if I wanted to read them, so I made this simple tool.

Universities don't help you to stay foolish - My experience with unhelpful admissions at Manchester University

“I always thought of myself as a humanities person as a kid, but I liked electronics. Then I read something that one of my heroes, Edwin Land of Polaroid, said about the importance of people who could stand at the intersection of humanities and sciences, and I decided that’s what I wanted to do.” - Steve Jobs Let’s be honest; not everybody gets university right the first time around.

Natwest.js

A command line banking tool written in Node.js Natwest.js is a command line tool written in Node.js which lets CLI addicts get your account information programatically from Natwest Bank (UK). It uses PhantomJS behind the scenes to fire up a webkit, submit your credentials and scrape some ugly HTML and output it into a beautiful terminal interface. Installation PhantomJS is required for this tool to work, Installation instructions are here: http://phantomjs.

Largest product in a grid

I’ve recently started learning Ruby and also been working my way through the programming problems on http://projecteuler.net/ so I decided to combine the 2. Here’s my attempt at problem 11. ##The problem What is the greatest product of four adjacent numbers in the same direction (up, down, left, right, or diagonally) in the 20×20 grid below? 08 02 22 97 38 15 00 40 00 75 04 05 07 78 52 12 50 77 91 08 49 49 99 40 17 81 18 57 60 87 17 40 98 43 69 48 04 56 62 00 81 49 31 73 55 79 14 29 93 71 40 67 53 88 30 03 49 13 36 65 52 70 95 23 04 60 11 42 69 24 68 56 01 32 56 71 37 02 36 91 22 31 16 71 51 67 63 89 41 92 36 54 22 40 40 28 66 33 13 80 24 47 32 60 99 03 45 02 44 75 33 53 78 36 84 20 35 17 12 50 32 98 81 28 64 23 67 10 26 38 40 67 59 54 70 66 18 38 64 70 67 26 20 68 02 62 12 20 95 63 94 39 63 08 40 91 66 49 94 21 24 55 58 05 66 73 99 26 97 17 78 78 96 83 14 88 34 89 63 72 21 36 23 09 75 00 76 44 20 45 35 14 00 61 33 97 34 31 33 95 78 17 53 28 22 75 31 67 15 94 03 80 04 62 16 14 09 53 56 92 16 39 05 42 96 35 31 47 55 58 88 24 00 17 54 24 36 29 85 57 86 56 00 48 35 71 89 07 05 44 44 37 44 60 21 58 51 54 17 58 19 80 81 68 05 94 47 69 28 73 92 13 86 52 17 77 04 89 55 40 04 52 08 83 97 35 99 16 07 97 57 32 16 26 26 79 33 27 98 66 88 36 68 87 57 62 20 72 03 46 33 67 46 55 12 32 63 93 53 69 04 42 16 73 38 25 39 11 24 94 72 18 08 46 29 32 40 62 76 36 20 69 36 41 72 30 23 88 34 62 99 69 82 67 59 85 74 04 36 16 20 73 35 29 78 31 90 01 74 31 49 71 48 86 81 16 23 57 05 54 01 70 54 71 83 51 54 69 16 92 33 48 61 43 52 01 89 19 67 48 ##My Solution