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



This was an insanely busy week with tons of tutorials and even a lot of newly released libraries. There’s a lot here to digest, but it is well worth it. Lately, if I am noticing any trends, it is more posts covering ES6 and how to use some of the upcoming features now, and Meteor, which seems to have garnered more tutorials and posts lately. Enjoy.


Joe Zimmerman shows how you can use the future of JavaScript today by transpiling from ES6 to ES5 or using JS supersets.
The Future of JavaScript…Now!

Nicolas Bevacqua explores how to create common JavaScript library functionality using just the Native DOM API.
Uncovering the Native DOM API

Donovan Hutchinson shows how he recreated the iOS7 banner from WWDC using HTML and CSS.
Recreating the iOS7 Banner with HTML and CSS

Will Vaughn walks through the why and the how of rolling your own Yeoman generators.
Roll Your Own Yeoman Generators

Parker Bennett explores different approaches to handling fluid and responsive images.
Crop Top – CSS-Tricks

Johnny Simpson makes a 3D book that can be rotated and opened using mostly CSS with some JavaScript.
Making an Awesome Interactive 3D Book With CSS3 Transforms

Dr. Axel Rauschmayer shows how to use ECMAScript 6 proxies to automatically bind methods that are extracted from an object.
ECMAScript 6: automatically binding extracted methods

John McCutchan and Loreena Lee cover memory management in JavaScript and V8 and how to debug memory usage issues.
Effectively managing memory at Gmail scale

Mary Lou shares some nice looking modern button styles using CSS transitions.
Creative Button Styles

Chris Coyier recreates hover boxes with icons that expand horizontally then vertically, filling the parent box.
Pizza Time Hovers

Stuart Memo shows how to get started using the Web Audio API by recreating the classic Stylophone.
Web Audio Stylophone

Christian Heilmann uses PNG transparency, canvas and some JavaScript to create irregular shaped rollover images.
Irregular shape rollovers with Canvas and PNG

Tiffany Brown goes into great detail on how to ue CSS 3D transforms.
Understanding 3D Transforms

Libraries and Frameworks

Raymond Camden shares some code samples and details on his JavaScript Cookbook Node project.
More on my JavaScript Cookbook Node project

Alex Young continues his AngularJS tutorial series by discussing iterators and filters.
AngularJS: Iterators and Filters

Pamela Fox details the Backbone stack at Coursera.
Our Backbone Stack

Simon Bailey shows how to speed up development of AngularJS applications using Yeoman, Grunt and Bower.
Automating AngularJS With Yeoman, Grunt & Bower

Pamela Fox looks at whether there is a DRYer way to reference DOM from within her JavaScript/Backbone application.
Referencing DOM from JS: there must be a DRYer, safer way

Sacha Greif shares how he built a full app in under an hour using Meteor.
Building An App In 45 Minutes With Meteor

Gabriel Manricks explains working with data in Sails.js, a framework for Node that mimics the MVC pattern of Rails.
Working With Data in Sails.js

Chritian Heilmann explains how to use the HTML5 canvas to image mask using the canvasmask.js script.
Image Masking with HTML5 Canvas


Holly Schinsky shares her personal workflow for building PhoneGap apps for iOS. Weblog
My Development Workflow for PhoneGap iOS Apps

Johnny Simpson shows how to build a slide-in/slide-out menu designed for mobile.
Designing ‘Swipe to Open’ Mobile Menus and Best Practices

Shazron Abdullah details the changes in Cordova iOS 2.8.0. Blog
What’s new in Cordova iOS 2.8.0

Christophe Coenraets created a new PhoneGap plugin for working with the the Dropbox Sync API.
PhoneGap Plugin for the Dropbox Sync API

Holly Schinsky shares a sample mobile app to help developers get started with PhoneGap and AngularJS.
Quick Start Guide to PhoneGap+AngularJS

Andrew Trice explores connecting a pressure sensitive bluetooth stylus with a PhoneGap application.
PhoneGap Exploration – Realtime Hardware Communication

New and Updated Libraries and Frameworks

Classy.js is a tiny framework for writing inheritance in JavaScript.

The Brackets Sprint 26 Build has new features and upgrades the editor to jQuery 2.0.1, LESS 1.3.3 and Bootstrap 2.3.1
Brackets Sprint 26 Build

Evilscan is a command line ip/ports scanner built with NodeJS.

picnicc allows you to create custom builds of your favorite JavaScript libraries with only the functions you need.

Hitch is a small JavaScript library that provides an extension model for CSS allowing use of some proposed features.
Hitch – A resource to add some expressive power to CSS for developers

jQuery Time Autocomplete is a time picker dropdown that works similarly to Google Calendar’s time picker.
Better time drop downs for ranges: jQuery Time Autocomplete

The “When Can I Use” web widget is designed to allow authors to easily add browser support info to their blog posts.
The “When Can I Use” Web Widget

Easystar.js is a pathfinding API for JavaScript which will find a path through tiles on a grid.

HTML Inspector is a code quality tool written in JavaScript that runs in the browser.
Introducing HTML Inspector


Active Theory discuss how they built the Racer Chrome experiment from Google I/O.
Case Study: Building Racer

Leave a Comment