Best of JavaScript, HTML5 & CSS3 - Week of June 11, 2012

Best of JavaScript, HTML5 & CSS3 - Week of June 11, 2012:
This week is seriously filled to the brim with tutorials, many focused on new HTML5 and CSS3 features and a number on various frameworks. I am attending An Event Apart Boston today through Wednesday, so if you happen to be attending, please say hello.

Tutorials

Johnny Simpson demonstrates how to make animated CSS3 progress bars using CSS with SVG backgrounds.

Making Awesome, Animated CSS3 Loading Bars with SVG Backgrounds

Part two of Stoyan Stefanov's series on manipulating pixels in HTML5 Canvas shows how to create emboss, blur and other effects that require not just editing individual pixels but also those around them.

Canvas pixels #2: convolution matrix

How to modify pixels in an HTML5 Canvas to create effects on video from getUserMedia by Stoyan Stefanov.

Canvas pixels #3: getUserMedia

Zack Grossbart walks through how to use the profiler in Chrome Developer Tools to isolate issues and improve the performance of your JavaScript.

JavaScript Profiling With The Chrome Developer Tools

CSS variables apparently landed in a WebKit nightly and Stoyan Stefanov shows how they currently work, with vendor prefixes, and how they will work in the long term.

CSS variables

Raymond Camden shares an example of a dynamic HTML5 datalist control for autocomplete support for an input field.

Example of a dynamic HTML5 datalist control

A great overview of how to use various CSS3 filter like invert & blur along with their browser support.

CSS3 Filters: Altering HTML and Images with just CSS

Good introduction to understanding how to calculate the CSS 2D & 3D transforms matrix by Tiffany Brown.

Understanding the CSS Transforms Matrix

A helpful, short post by Tab Atkins Jr on how CSS handles and recovers from errors.

How CSS Handles Errors - Tab Completion

Brandon Pierce shows how to create minimal circular 3D buttons with CSS.

Crafting Minimal Circular 3D Buttons with CSS

CreativeJS posts the first in a series of posts on getting started with the Web Audio API.

Web Audio API – Getting started

Mike West discusses a new feature of HTML5 available in some browsers already called the Content Security Policy that can help prevent XSS attacks.

An Introduction to Content Security Policy

Frameworks and Libraries

Mark Dong walks though HTML mobile application development using jQuery mobile, RequireJS & BackboneJS.

Getting started with HTML mobile application development using jQuery mobile, RequireJS and BackboneJS

buildr looks like a very useful tool for doing programmatic JavaScript templating. Joe Zim shows how to use it.

Programmatic JavaScript Templating with buildr

Michael Chaize shows how to do multitouch such as drag, pinch to rescale & rotation gestures on your mobile web application with Hammer.js.

Multitouch with Hammer.js

Gabriel Manricks builds a video uploader with Node.js that can resume interrupted uploads & generate a thumbnail.

How to Create a Resumable Video Uploader in Node.js

Joe Lambert walks through creating an image gallery with a page turn effect created with CSS3 & jQuery.

Create a page turn effect

Joe Zim compares $script.js and RequireJS for JavaScript dependency management.

$script.js vs RequireJS: Dependency Management Comparisons

Eric Feminella discusses the templates module pattern he uses to provide a central location to access all compiled templates.

Managing Client-side Templates with RequireJS

Mobile

Andy Trice shows how to build PhoneGap apps powered by Database.com's hosted relational database service.

Building PhoneGap applications powered by Database.com

New and Updated Frameworks and Libraries

Backbone Aura is a decoupled, event-driven architecture on top of Backbone.js for developing widget-based applications

Backbone Aura by addyosmani

Jens Nockert & Devon Govett release FLAC.js JavaScript FLAC decoder for the "Free Lossless Audio Codec"

Introducing FLAC.js: A Pure JavaScript FLAC Decoder

James Ward released a jQuery plugin that allows you to dynamically render GitHub files in web pages.

Dynamically Rendering GitHub Files in Web Pages

Etc.

Raymond Camden created a CSSLint extension for the Brackets open-source code editor.

Posted my first Brackets Extension - CSSLint

WebModular is a modular synthesizer written in HTML5 and JavaScript with sound generation done in pure JavaScript. Very cool

WebModular (HTML5+Javascript Modular Synthesizer)

DIGITAL JUICE