In the last few days of 2014, I resurrected my long-neglected GIF-beatmatching project DJGif to throw a New Year’s party on my rooftop:
A DJ using Ableton Live, a huge bundle of MaxMSP emitting a UDP stream of beat information (courtesy of the immensely pro Cade), a UDP ➝ WebSockets server, and DJGif pulling hundreds of GIFs off various Tumblrs to beatmatch <x-gif> on two projectors makes for a hell of a good show.
Take a look at the ES6 Compatibility Table by @kangax for a sense of the sheer number of new features that make up the ES6 spec as well as the impressive progress of ES6 compilers such as Traceur and 6to5. Arrow functions, classes, destructuring, template strings, symbols & promises are all there and usable today. They’ve actually been usable for a while, actually, and I was vaguely familiar with most of them, but for DJGif I added the final missing piece — modules.
JSPM + SystemJS - a new in-browser workflow
JSPM is a package manager with a CLI intended to replace the need for NPM or Bower for front-end projects, but, because SystemJS works with pretty much anything, happily works with code from NPM or Github. It’s pretty much exactly like what the NPM team recommended as a solution to front-end dependency management on their blog.
They’re both incredible pieces of open-source work with burgeoning communities, but it’s worth mentioning that they owe their existence largely to the tireless efforts of Guy Bedford. Damn fine work, Mr Bedford.
Rather than go on in detail about how this all hangs together, I thought I’d try my hand at a screencast that shows you, in 10-and-a-half minutes, what using JSPM, SystemJS and ES6 is like. We’re going to build something that scrapes the top GIFs from /r/perfectloops and displays them.
Call for Feedback
This is my first serious attempt at a screencast, so if you watched it and have some thoughts, get in touch! And if you’d like to hear about when the next one launches, pop your email in here: