Best of JavaScript, HTML & CSS

A lot of great tutorials and new or updated projects this week. One theme that struck me this week was a focus on new features in ECMAScript 6, including posts from Ariya Hidayat, Ryan Anklam and Axel Raushmayer. Another item that seemed to generate a lot of excitement was the grunt-devtools project that is a Grunt task runner extension for Chrome Developer Tools. Enjoy!

Tutorials

Good post by Mark Dagget that covers the intricacies of JavaScript functions. Useful for even experienced coders.
Functions Explained

Peter Muller explains how border-box in CSS3 is a better alternative to the classical box model.
CSS3 Lifelike: A Slightly Different Box Model with {box-sizing:border-box}

Xiaoyang Kao explains how he created virtual lane graphics for a swimming broadcast with HTML and the CSS perspective transform.
virtual lane graphics for swimming with css3

Gabriele Romanato discusses how to style form elements with CSS to get as close to consistent rendering across browsers as currently possible.
The Problem Of CSS Form Elements

Hans Muller explains how the padding for a rounded rectangle is calculated in CSS exclusions.
Padding the Rounded Rectangle

Chris Coyier demonstrates how to recreate the stripe hovers from the Uniqlo site using pure HTML and CSS.
Uniqlo Stripe Hovers

Annarita Tranfici discusses 3 strategies for responsive imagery and some tools to implement those strategies.
Understanding Responsive Web Design: Responsive Imagery

Rakhitha Nimesh posts a beginner's guide to the JavaScript date object including formatting, comparisons and more.
The Beginner's Guide to JavaScript Date and Time

Learn how to build a chat over WebSocket with XMPP in this book excerpt from The Definitive Guide to HTML5 WebSocket.
Book excerpt: The Definitive Guide to HTML5 WebSocket

Mary Lou posts an example blueprint for a responsive content slider.
Elastic Content Slider

Brandon Satrom shares the four principles of writing good API Design using JavaScript.
Secrets of Awesome JavaScript API Design

Ariya Hidayat explains how the object literal property value shorthand in ECMAScript 6 can help you write less and cleaner looking code.
ECMAScript 6 and Object Literal Property Value Shorthand

Tyler Fry posts a cool experiment using CSS regions and 3D transforms to create a carousel reader.
Carousel Book Reader Layout Using CSS Regions

Ryan Anklam experiments with learning ECMAScript 6’s modules.
Playing with ECMAScript.Harmony Modules using Traceur

Jake Archibald demonstrates how you’d build animations with the new WebAnimations specification.
We’re Gonna Need A Bigger API!

Dr. Axel Raushmayer explains ECMAScript 6’s destructuring and shows how this can benefit for each loops.
ECMAScript 6’s parameter destructuring and forEach()

Libraries and Frameworks

Anuj Gakhar teaches you how to write your first Grunt task.
Writing a Simple Grunt Task using GruntJS

Stephen Thomas posts an extensive tutorial showing how to unit test Backbone applications using Mocha, Chai & Sinon.
Unit Testing Backbone.js Applications

Alex Young discusses some of the changes in Grunt 0.4, why they are better and how they might impact existing projects.
Upgrading to Grunt 0.4

Mobile

Christophe Coenraets posts some of the questions and answers from his session on architecting PhoneGap applications.
PhoneGap Q&A

Aurelio de Rosa continues his tutorial series by covering the remaining JavaScript functions and a brief overview of the CordovaConnection and InAppBrowser APIs.
Build a Currency Converter with jQuery Mobile and Cordova: Rate Updates

New and Updated Libraries and Frameworks

grunt-devtools is a Grunt task runner extension for Chrome Developer Tools.
grunt-devtools

The Foundation framework has been redesigned to be mobile first and semantic.
Foundation 4 is Here: The Smartest Foundation Yet

Fancy Input is a really slick experimental jQuery plugin that adds some cool effects on text inputs and text areas.
Fancy Input – jQuery plugin

Parallel.js is a tiny library for multi-core processing in Javascript in the browser using web workers.
parallel.js

The jQuery Animated Table Sorter is a simple html table sorter that nicely animates the sorting operation.
jQuery Animated Table Sorter

Jim Cowart explains the issues with cross frame messaging to send messages between windows and how he created postal.js to solve these.
Cross Frame Messaging with postal.xframe

Quildreen Motta explains his approach to JavaScript API documentation and shares a set of 3 libraries he created to start implementing that approach.
Unfancy API Documentation

svg.js is a lightweight library for manipulating and animating SVG.
svg.js

Thorax is an opinionated framework for building large scale web applications built upon Backbone + Handlebars and from Wal-mart Labs.
Thorax

Etc.

Browserhacks is a new site that aims to be a comprehensive list of browser-specific CSS and JavaScript hacks.
Browserhacks

February's HTML, CSS, JavaScript and Mobile Content on the ADC.
ADC Web Standards Monthly - February 2013

Todd Anglin posts 10 interesting predictions for the future of HTML5 in 2013.
HTML5: 10 Provocative Predictions For The Future