Over a million developers have joined DZone.

Best of JavaScript, HTML & CSS - Week of April 1, 2013

DZone's Guide to

Best of JavaScript, HTML & CSS - Week of April 1, 2013

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

This week features a lot of library and framework-focused tutorials including jQuery, Ember, Sass, Jasmine, Grunt and Backbone. It was an active week despite everyone being occupied by posting and reading about Blink and, to a lesser degree perhaps, asm.js. I am also happy to announce the launch of 3 new articles on my new web development tutorials site Flippin' Awesome on the topics of Jasmine and Backbone, Windows Phone 8 with PhoneGap and PhoneGap Build with jQuery Mobile. I apologize for singling these out, but I have been spending much of my nights and weekends getting this site rolling - so I hope you enjoy it.


Dirk Schulze explains how the new CSS Masking spec brings clipping and masking graphics into HTML.
CSS Masking

David Walsh shows how you can use CSS @supports and CSS.supports in JavaScript to detect browser feature support.
CSS @supports

John Resig explains where Asm.js came from and why it exists.
Asm.js: The JavaScript Compile Target

Raymond Camden shows how to delay playing an Edge Animate animation until it is visible on the page.
Delaying an Edge Animate asset until visible

Jason Grigsby explains how embedding media queries inside SVG images lets you define how an image should look at different sizes without knowing how it will be used.
Media Queries in SVG images Cloud Four Blog

Alan Stearns shares a technique for defining presentational boxes with shadow DOM.
Defining Presentational Boxes with Shadow DOM

Dr. Axel Rauschmayer shows how you can avoid some common bugs in your JavaScript code by enforcing the use of toString().
Enforcing toString()

A nice article by Carrie Cousins explaining the different between Em and Rem and their place in responsive web design.
What's the Deal With Em and Rem?

Sarah Forst shows how to make fancy buttons using just CSS.
Shiny CSS Buttons, No Images Required

Dr. Axel Rauschmayer starts a series on JavaScript quirks by covering the various ways the language implicitly converts values.
JavaScript quirk 1: implicit conversion of values

Libraries and Frameworks

Ken Tabor shares how-to's and advice on using Jasmine to unit test your Backbone.JS application.
Backbone Model Unit Testing with Jasmine

Hugo Giraudel demonstrates how to position items on circle with CSS and Sass.
Items on circle with CSS

Jack Franklin shows how you can create custom builds of jQuery, with only the parts you need, today using Grunt.
Custom jQuery Builds with Grunt

Jonathan Creamer walks through all the steps to build a large, maintainable and testable Knockout.js application.
Building Large, Maintainable, and Testable Knockout.js Applications

Joe Zimmerman continues his detailed introduction to Backbone.Marionette by discussing its module system.
A Thorough Introduction To Backbone.Marionette (Part 2)

Alex Young continues his Backbone.js tutorial series by covering using Backbone with jQuery plugins.
Backbone.js Tutorial: jQuery Plugins and Moving Tasks

Jack Franklin shows how you can write your own custom CSS methods using jQuery.
jQuery CSS Hooks

Rey Bango continues his tutorial series by walking through the first steps in creating a basic Ember app.
Getting into Ember.js: The Next Steps


I continue my series on creating your first mobile app with PhoneGap Build, with a focus on adding jQuery Mobile.
Create Your First Mobile App with PhoneGap Build – Adding jQuery Mobile

Jesse McFayden explains everything you need to know to start developing for Windows Phone 8 with Apache Cordova.
Developing for Windows Phone 8 in Apache Cordova

New and Updated Libraries and Frameworks

Sidr, by Alberto Varela, is a jQuery plugin for easily creating side menus.
Sidr - A jQuery plugin for creating side menus

Huey is a Javascript utility that finds the dominant colour of an image and returns it as an RGB array.

Store is a simplified and improved API for accessing browser localStorage.

Ariya Hidayat shows how to use groundskeeper to automatically remove any console.log calls in your JavaScript before deploying.
Automagic Removal of JavaScript Logging

Chardin.js is a jQuery plugin that provides a simple way to overlay user instructions on your site.


The Appliness April issue is out and features an interview with Chris Coyier and tons of tutorials.
Appliness April with Chris Coyier!

Sarah Hunt posts a video showing how to bring a responsive Animate composition into Edge Reflow.
How to add an Edge Animate Project to Edge Reflow Output

Eric Bidelman shares his thoughts on Chrome's new rendering engine called Blink.
Blink. Chrome's new rendering engine

The new release of Edge Reflow includes improved layout and styling capabilities and improved performance/stability.
Reflow New and Improved!

Peter Farland discusses how you can potentially infer JavaScript variable types and how this is being used to create type-aware code hinting in Brackets.
Type-Aware JavaScript Code Intelligence

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}