Best of JavaScript, HTML & CSS – Week of July 22, 2013



Wow, this was a busy week! I know there’s a lot here, but I highly recommend taking the time to read through as there were a lot of important tutorials and releases this week. Some significant releases include new Twitter BootStrap, Bower, UIKit, Ractive.js and more.


Thibault Imbert converts audio data from the microphone to a WAV file using JavaScript, getUserMedia and Web Audio.
From microphone to .WAV with: getUserMedia and Web Audio

Marko Dugonjić looks at a number of methods for setting subheads with CSS.
Setting subheads with CSS

Kirupa Chinnathambi explains how requestAnimationFrame lets you create smooth and fluid animations using JavaScript.
Animating with requestAnimationFrame

Check out this cool code for generating random spherical effects using Marko Švaljek.
Random spherical effects

Louis Lazaris details why the ::selection pseudo-element isn’t in current or future specs though it is widely used.
What’s the Status of the ::selection Pseudo-element?

Nice post by John Hann on tools for building maintainable JavaScript apps, events and AOP, rather than forcing OOP.
OOP is Not Your Hammer

Ariya Hidayat uses filter, map, every and reduce to generate a variety of different sequences with JavaScript arrays.
Prime Numbers, Factorial, and Fibonacci Series with JavaScript Array

Dr. Axel Rauschmayer answers the arguments against using JavaScript’s constructors and using new when creating an instance.
In defense of JavaScript’s constructors

Jason Brown shows replicates the Doom “screen melt” effect using JavaScript and Canvas.
Replicating the Doom Screen Melt with JavaScript and Canvas

Stephen Thomas presents an approach to responsive images supported by all browsers using CSS background images.
Simple Responsive Images With CSS Background Images

Dr. Axel Rauschmayer shows how modules work in ECMAScript 6 and tools that allow you to already use them now.
ECMAScript 6 modules: the future is now

David Walsh shows the HTML and CSS required to build a cube
Create a CSS Cube

Krasimir Tsonev shows some usage examples of CSS before and after pseudo elements
CSS: :before and :after pseudo elements in practice

Libraries and Frameworks

Jonathan Fielding walks through the steps to build you own command line utility using Node.
Writing a Command Line Utility using Node

Tim Severien shows how you can use the Promin jQuery plugin to easily create user-friendly multi-step forms.
Creating Multi-step Forms with jQuery and Promin

Pamela Fox shares an internal best practices guide to writing Backbone apps at Coursera.
A Guide to Writing Backbone Apps at Coursera

Ben Nadel explains his current solution to implement lazy loading of images within an AngularJS application.
Lazy Loading Image With AngularJS

Johnny Simpson reviews a number of bootstraps including Twitter Bootstrap, Foundation, Pure, Cardinal, UI KIt and Topcoat.
Bootstraps and Web Kits: Enemy or Efficient?

Joel Hooks shows how to use ui-router with AngularJS to define states, and transition your application to those states.
The basics of using ui-router with AngularJS

Addy Osmani shares tips and examples of integrating a back-end build process dependent on Maven with a front-end process using Grunt.
Making Maven Grunt.

Arunoda Susirpala demonstrates how to use Meteor Streams to add messaging based, real-time communication with Meteor.
Real-Time Messaging for Meteor With Meteor Streams

Gabriel Manricks walks through the process that Handlebars uses to compile templates.
Handlebars.js – a Behind the Scenes Look


Raymond Camden shares another, better, example of using PhoneGap and Parse to add the ability to upload files in an app.
Better example of PhoneGap, Parse, and uploading files

New and Updated Libraries and Frameworks

Bootstrap 3 RC1 is out with tons of changes, new docs and more.
Bootstrap Blog

Bower 1.0 is a total rewrite designed to be much faster with a clear architecture, along with a host of new features.

grunt-express let’s you start an Express.js web server using Grunt, specifying the port and other options.

leapjs is a JavaScript client for the Leap Motion Controller.

pointer.js is a utility that helps developers manage touch and click events across devices.
Mobile and Desktop Event Normalization with pointer.js

VerbalExpressions is a JavaScript library that helps to construct difficult regular expressions.

The VMUX JavaScript library allows plugin-free video calls in your browser using WebRTC and Node.

Ractive.js offers features like data binding, efficient DOM updates and event handling with a short learning curve.
Ractive.js – next-generation DOM manipulation

sync.js is a JavaScript project built on Node that keeps remote files in sync with your local copy.

UIKit is a modular front-end framework featuring a collection of HTML, CSS, and JS components.


Peter Bell shows common problems around rewriting history using Git and how to solve them.
Changing History with Git

This WebGL Water demo by Evan Wallace is pretty amazing (note: doesn’t work in all browsers).
WebGL Water

How can you keep up with all the new JavaScript, HTML and CSS projects? I share some of my favorite resources.
Keeping Up with New JavaScript, HTML and CSS Projects

Paul Trani shows how to create a slideshow gallery with Edge Animate with infinite photos loaded dynamically.
How to Create a Slideshow in Edge Animate

Raymond Camden discusses a few Brackets extensions that make it easier to work with GitHub.
Using GitHub with Brackets

Leave a Comment