Best of JavaScript, HTML & CSS – Week of March 24, 2014

by Brian Rinaldi on April 2, 2014

The modern web is always changing, and this article is more than two years old.

This was a busy week. My post about being paralyzed by choice in front-end development seems to really have struck a nerve. One of the suggestions was to use round ups like this one to help filter out the noise. The goal of these posts is to, hopefully, make it easy to scan and find those items that are interesting and relevant to you.

Another great opinion post came from Chris Coyier who discusses how the more familiar we become with a particular technology, the more aware of its many flaws we are. This can often lead to focusing too much on the flaws than the benefits.

Lots of other great tutorials too. Enjoy!

Tutorials

I share ideas to avoid getting overwhelmed by the constant influx of new front-end tools, libraries and frameworks.
Paralyzed by Choice in Front-end Development

My walkthrough on creating audio feedback or music using oscillators to generate common waveforms with Web Audio API.
Creating Sound with the Web Audio API and Oscillators

Rik Cabanier covers cutting edge Canvas features in browser nightlies including Path2D objects, ImageData constructors and more.
New canvas features

Vincent Tantardini shares his experience using CSS3 to animate several HTML elements at once using keyframes.
Playing with CSS3 Animations

Mary Lou shows a proof of concept for a 3D effect that flips an image to reveal related content.
3D Grid Effect

Libraries and Frameworks

Learn the basics of package management with npm and how to create and publish your own package from Toby Ho.
Introduction to npm

Emanuele Feronato shares the source code for building a game like Threes using HTML and jQuery.
jQuery-only working game like “Threes” (or “1024″, or “2048″, or…)

Ben Nadel explains how to preload the image binaries using a Preload service and then render them via a directive.
Preloading Images In AngularJS With Promises

Toby Ho shows a module called array which adds events and functional methods to JavaScript arrays.
array

Andy Matthews shares the unit testing approach with Ember that they use within his company.
Unit Testing Ember.js: Handlebars Helpers

Emre Guneyler shows how to build a simple chat application using Socket.IO and Backbone.
A Chat Application Using Socket.IO

Addy Osmani takes a look at build tasks you can use to remove unused CSS in your pages.
Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch

Jack Franklin shows hot use command line tools such as Grunt, Bower and Yeoman to speed up your development workflow.
Embracing Command Line Tooling with Backbone Applications

Chris Coyier shares some Sass for rotating and angling column headers to save space but remain easy to read.
Rotated Table Column Headers

Rey Bango shows how you can use the Polymer library to create and use web components today.
Using Polymer to Create Web Components

Mobile

Burke Holland discusses some best practices for structuring a Kendo UI Mobile hybrid application.
Structuring Hybrid Mobile Applications

Chris Griffith shows how you can use an Edge Animate animation with sound within a PhoneGap mobile app.
Edge Animate & PhoneGap Build

Jake Bresnehan shows a number of solutions for throttling bandwidth to simulate slow connections.
Throttle Bandwidth for Testing

Etc.

Chris Coyier has a good post on how familiarity with a technology makes you almost too aware of its many flaws.
Hatin’ on Web Tech

Pearl Chen discusses a new Chrome feature that allows you to view the full call stack of asynchronous JavaScript callbacks.
Debugging Asynchronous JavaScript with Chrome DevTools

Java 8 includes a built-in JavaScript engine called Nashorn that compiles JavaScript code to Java bytecode.
Nashorn: The New Rhino on the Block

The HTML picture element is coming to browsers soon.
Bringing Responsive Images to Browsers