this space intentionally left blank

March 27, 2015

Filed under: journalism»professional

Construction and architecture

In the last couple of weeks, a few more of my Seattle Times projects have gone live — namely, the animated graph in this story about EB-5 visa growth, and the Seattle architecture quiz. Both use the FLIP animation technique I wrote about a few weeks ago, although it's much more elaborate in the EB-5 graph, which animates roughly 150 elements at 60fps on older mobile devices.

In the case of the architecture quiz, I also added the Babel compiler (formerly 6to5), which turns ES6 code into readable ES5 JavaScript that the average browser can run. Although it's not an enormous change, looking through the original source code will show the new object literal syntax, template strings, and (my personal favorite) fat arrow functions, which do not rebind this and offer a lighter-weight syntax for array sort, map, and filter operations.

I'm not sold on all of the changes in ES6 — I think let is overrated, and the module syntax is pretty terrible — but these changes are definitely a positive step that reduces much of the boilerplate that was required for modern JavaScript. Most importantly, one of Babel's big advantages is that it produces readable output, compared to previous compilers like Traceur, so that even without source maps it's easy to debug. We've added Babel as a part of the default build step in the Times news app template, so if you're looking to try it out, there's no better time than now.

Future - Present - Past