Best of JavaScript, HTML5 & CSS3 - Week of September 17, 2012

Best of JavaScript, HTML5 & CSS3 - Week of September 17, 2012:
A lot of good tutorials this past week, as usual. As many of you know, today is also Adobe's Create the Web event in San Francisco. There are a lot of announcements to come out of this event as well, none of which is covered in this post. I am attending the event however and hope to cover everything announced and discussed here tomorrow. You can watch the event live.

Tutorials

Hans Muller discusses responsive images for HTML5 and gives an overview of the img srcset proposal.

Responsive Images for HTML5

David Walsh shows how you can use the HTML5 hidden attribute instead of display:none in CSS.

HTML5 hidden Attribute

Raymond Camden creates a demo using ReKognition for scene recognition in images.

Looking for a Face.com API replacement? Try ReKognition.

Josef Richter shares a proof of concept using a HTML5 canvas to resize images before upload.

Resizing images before upload using HTML5 canvas

Chris Coyier has a good round up of methods for handling flexible media, images, video and audio, in a responsive web design.

Rundown of Handling Flexible Media

Colin Ihrig uses HTML5 geolocation, with Google’s Maps API, to display driving directions on a map and text.

Finding Yourself Using Geolocation and the Google Maps API

Justin Naifeh discusses encapsulation in JavaScript, or lack thereof.

Encapsulation Breaking

Oswald Campesato shares examples on how to use CSS3 transitions, keyframe rules and CSS3 functions scale3d(), rotate3d() and translate3d() from his recent book.

CSS3 2D and 3D graphics and animation effects

Nicholas Zakas explains the insertion sort algorithm and how it is implemented in JavaScript.

Computer science in JavaScript: Insertion sort

Frameworks and Libraries

Trek Glowacki gives a good thorough introduction to the Ember.js framework.

Trek by trek

John Polacek's tutorial creates a slideshow-like fullscreen background video with BigVideo.js, a jQuery plugin.

Fullscreen Video Slideshow with BigVideo.js

Johnny Simpson creates a flipbook image gallery using CSS3 3D transforms and jQuery.

Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery

Andrew Burgess discusses Jam, a Node module that is a command-line utility for managing AMD in your JavaScript applications.

Frictionless AMD with Jam

Santosh Rajan demonstrates LispyScript, a tree structured programming language that compiles to JavaScript.

Tutorial: LispyScript Introduction

Mobile

Learn best practices for creating PhoneGap apps that look and perform like native from Greg Avola, creator of Untappd.

Creating apps with PhoneGap: Lessons learned

Robert Kowalski posts the first part in a mobile app development tutorial using the Enyo framework.

Enyo Tutorial: Part 1

A great overview by Maximiliano Firtman on new items and changes HTML5 developers need to know about the iPhone 5 and iOS 6.

iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more

Really interesting look by David Bloom at the iPhone 5 website examining how Apple compresses video using JPEG, JSON, and <canvas> to avoid using open-source codecs.

iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and canvas

Raymond Camden begins this series by showing how he used Adobe Proto to prototype his PhoneGap application.

Building a Parse.com Enabled PhoneGap App - Part 1

New and Updated Frameworks and Libraries

Nunjucks is a direct port of the Python jinja2 templating engine and supports server/client-side rendering.

Nunjucks

Brackets Sprint 14 is available with update notifications, source code pro typography and more.

Brackets Sprint 14 Build

Etc.

Movi.Kanti.Revo is a Chrome Experiment by Cirque de Soleil that uses CSS animations, 3D transforms and getUserMedia().

Announcing Movi.Kanti.Revo, a new Chrome Experiment

DIGITAL JUICE