Best of JavaScript, HTML & CSS - Week of April 1, 2013
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.
Tutorials
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
Mobile
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.
huey
Store is a simplified and improved API for accessing browser localStorage.
store
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.
Chardin.js/
Etc.
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
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)