Monthly Archives: January 2015

Pause and slow down CSS3 animations in Chrome Dev Tools

Chrome Canary gives you a sneak peak of dev tools for CSS3 animation


Visually debugging CSS animation just got a whole lot easier! We’ve needed better debugging tools (or any debugging tools, really) for CSS animation for ages. Now we’re starting to see some show up in browsers! The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations.

To try these out for yourself in Canary, open up Dev Tools and go to Styles tab under Elements. Look for the play button in the far right and you’re off to the races.

Read more from the source:

JavaScript I/O Brings ES6 to the Node Community

Are you sad that Joyent isn’t forward thinking with node.js? Start using io.js, a community-driven fork of node.js


io.js is a JavaScript platform built on Chrome’s V8 runtime. This project began as a fork of Joyent’s Node.js™ and is compatible with the npm ecosystem.

Why? io.js aims to provide faster and predictable release cycles. It currently merges in the latest language, API and performance improvements to V8 while also updating libuv and other base libraries.

This project aims to continue development of io.js under an ” open governance model” as opposed to corporate stewardship.

io.js has moved to Semver. The choice to release as 1.0.x was not to signify that io.js should be considered production-ready, but because it was a significant enough release from Node.js™ to warrant a major version increment.

Read more from the source:

The Moonpig Bug: How 3,000,000 Customers’ Details Were Exposed

Some idiot thought that instead of OAuth tokens or the like, “let’s use the integer user id as proof that the user logged in ok”


It’s been all over the British news today: developer Paul Price found a bug in photo-crap-maker Moonpig’s site, one that might have exposed three million users’ personal information. Paul’s got a great technical post about it at — but there’s no decent non-techie explanation except for the one-paragraph summaries in newspapers. It was a perfect storm of tech incompetence: here’s how to avoid doing it yourself.

Watch Tom Scott’s video at

JavaScript for Kids, A Playful Introduction to Programming by Nick Morgan

Perhaps teaching our kids JavaScript is not just a fad


JavaScript for Kids is a lighthearted introduction that teaches programming essentials through patient, step-by-step examples paired with funny illustrations. You’ll begin with the basics, like working with strings, arrays, and loops, and then move on to more advanced topics, like building interactivity with jQuery and drawing graphics with Canvas.

Along the way, you’ll write games such as Find the Buried Treasure, Hangman, and Snake.

Read more from the source:

Elastic SVG Elements

Holy crap, you can use SVG to animate content boxes that bounce, flex, and change shape!

Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it. It’s of course important to keep things subtle and not exaggerate the bounciness. The nice thing is that we can give a more “realistic” interaction feedback to the user. Especially touch feedback can benefit from using this kind of effect. Based on this idea, we’ve created some inspirational examples of contexts where a morphing shape animation enhancement could make sense.

Read article and view demos as Codrops