Best of JavaScript, HTML & CSS – Week of June 3, 2013



This was a jam-packed week of content with some notable themes on debugging performance issues and AngularJS tutorials. I’ll get to the links in a moment, but I wanted to note the new “venue” for this post. I’ve been writing this weekly update of what I think are the best tutorials, libraries and other posts during the prior week for about a year and a half on my personal blog, However, with the recent launch of this site, it seemed to only make sense to transition this update here. Look for these posts each week on Monday morning and catch up on anything you may have missed from the prior week.


Pavlo Pidlypenskyi experiments with lazy-loading images with pure CSS.
Loading Images on Demand with Pure CSS

Emily Lewis posts part 1 in a series covering new selectors in CSS3, starting with structural pseudo-classes.
All You Need To Know About CSS3 Selectors, #1: Structural Pseudo-Classes

Donovan Hutchinson creates the coolest stuff using just CSS. In Portal CSS he recreates the initial training scene in 3D.
Portal CSS

Jake Archibald deep dives into script loading, discussing the complexities of doing this in a non-blocking manner.
Deep dive into the murky waters of script loading

Chris Coyier demonstrates some use cases for calc() in CSS rather than letting your preprocessor do the math.
A Couple of Use Cases for Calc()

James Long explains how JavaScript Generators, which just landed in V8, can keep you from callback hell.
A Study on Solving Callbacks with JavaScript Generators

Justin Gitlin explains how the Roll It game was built using WebGL, canvas and websockets.
Creating Roll It

Joshua Clanton explains how using duck typing in JavaScript can help you avoid unneeded conditional logic.
Using Duck Typing to Avoid Conditionals in JavaScript

Robert Nyman discusses the proposed Proximity API for detecting how close a device is to another physical object. Currently only on Firefox OS and FF for Android.
The Proximity API

David Walsh explains some common places you can avoid repeated operations in JavaScript.
JavaScript: Avoiding Repeated Work

Patrick Kunka shows how you can use text-align Justify to align any block element, not just text, and how this can be useful for responsive web design.
Text-align: Justify and RWD

Raymond Camden shows how you can filter results from IndexDB using a date range.
IndexedDB and Date Example

Dr. Axel Rauschmayer shows how to trigger events without jQuery.
Triggering events in vanilla JavaScript

Addy Osmani explains how to test the frame rate on scrolling of your web application to avoid “jank.”
Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study

John Allsopp shows how he built a browser-based security application using the  DeviceMotion API, WebRTC and canvas.
Build a motion activated security camera, with WebRTC, canvas and Device Orientation

Libraries and Frameworks

See how you can use Two.js with SVG exported from Illustrator to draw and animate using JavaScript.
Drawing and Animating with Two.js and Illustrator

Pete Hunt explains why build React when there are many JavaScript MVC frameworks and why you might want to use it.
Why did we build React?

Gabriel Manricks walks through how to create a multi-page site using JavaScript and the Meteor framework.
Creating a Multi-Page Site with Meteor

John Munsch shows how you can use AngularJS to modify variable content in an SVG.
AngularJS and SVG

Alex Young continues his AngularJS tutorial series by looking at handling form validation.
AngularJS: Form Validation

Pamela Fox explains the process her team took to identify and fix performance issues in their Backbone application.
Improving Backbone App Performance


Christophe Coenraets converts his sample Backbone mobile app to use Topcoat CSS library for its UI layer.
Sample Mobile / PhoneGap Application with Backbone.js and Topcoat

Christophe Coenraets posts a sample PhoneGap application for iOS built with Backbone.js and the Ratchet UI toolkit.
Sample Mobile / PhoneGap Application with Backbone.js and Ratchet

New and Updated Libraries and Frameworks

Seriously.js is a real-time, Node-based video effects compositor for the web built with HTML5, Javascript and WebGL.

Geo for Bootstrap is a Geocities theme for Twitter Bootstrap by Divshot. The web the way it was intended to be seen!
Geo for Bootstrap, a Timeless Theme by Divshot

Coquette is a microframework for JavaScript games with collision detection, keyboard input, canvas rendering and more.

Node GH is a set of GitHub command line tools built on NodeJS.
Node GH – All the power of GitHub in your terminal


The June Issue of Appliness is out and features an interview with Ryan Stewart and plenty of other great content.
June Issue with Ryan Stewart!

May’s HTML, CSS, JavaScript and Mobile Content on Flippin’ Awesome.
Flippin’ Awesome Monthly Newsletter

Leave a Comment