Best of JavaScript, HTML5 & CSS3 - Week of January 14, 2013

Posted on Jan 21, 2013

A lot of new and updated libraries this week including more updates to jQuery projects as part of the jQuery anniversary announcements. Of course, there were a ton of tutorials, including a pair on the Web Speech API which was recently made available within the Chrome Beta.


Fabrice Weinberg explains the spatial dimension portion of the Media Fragments URI and how you can try it out using a polyfill.
Media Fragments URI - Spatial Dimension

Sayanee Basu explains source maps, how to view them in Chrome and how to use them with number of minifiers and compilers.
An Introduction to Source Maps

Syed Fazle Rahman explains getting started with CSS3 2D and 3D transforms.
Advanced CSS3 2D and 3D Transform Techniques

Mary Lou demonstrates how to create an expanding overlay effect using the CSS clip property and CSS transitions.
Putting CSS Clip to Work: Expanding Overlay Effect

Jesse Cravens shows how ot build a calendar application using IndexedDB and FullCalendar.js.
Build a Milestone Calendar with IndexedDB and FullCalendar.js

Philip Walton explains the Z-Index in fabulous detail. My guess, you probably misunderstood how it works too.
What No One Told You About Z-Index

Val Head explains how animation-fill-mode can help you smooth out awkward jumps and cuts in your CSS animations.
CSS3 Animation, animation-fill-mode tutorial

A good look at dealing with transparency in CSS and overcoming issues of handling inherited transparencies by Steven Bradley.
How To Work With Transparent Colors And Images In CSS

Hugo Giraudel explains everything you need to know about the CSS clip property, its uses and limitations.
Understanding the CSS Clip Property

Bear Travis explains the benefits of icon fonts and the pros and cons of various methods of using them.
Icons and Icon Fonts

Chris Coyier shows how to let users customize, resize and crop their avatars using HTML5 drag and drop.
HTML5 Drag and Drop Avatar Changer with Resizing and Cropping

David Bushell demonstrates the benefits of implementing a responsive design that uses an off-canvas navigation.
Implementing Off-Canvas Navigation For A Responsive Website

Johnny Simpson shows how to build an infinite scroll feature using jQuery.
"Infinite” Scroll to Load More Content Pagination with jQuery

Brandon Satrom demonstrates how to use the speech input and Web Speech API's to capture and respond to voice input.
Using voice to drive the web: Web Speech API

A really impressive set of lessons being updated weekly on learning advanced HTML and CSS by Shay Howe.
An Advanced Guide to HTML & CSS

Glen Shire gives an overview of the Web Speech API that is now available in the Chrome Beta.
Voice Driven Web Apps: Introduction to the Web Speech API

This article explores how sections can improve your document structure and solve problems, and why they are an important contribution to the semantic Web.
The Importance Of HTML5 Sectioning Elements

Libraries and Frameworks

Alex Young finishes up the CRUD portion of his Backbone.js tutorial series by showing how to delete task lists.
Backbone.js Tutorial: Deleting Lists

Joe Zim continues his JavaScript Unit Testing with Jasmine series by discussing advanced features like spies & mocks.
JavaScript Unit Testing with Jasmine Part 2

Todd Anderson continues his test-driven grocery list application tutorial using Jasmine & RequireJS by adding the remove item feature.
The Making of a Test-Driven Grocery List Application in JS: Part VII

Ben Nadel shows how to clear just the inline CSS properties of a DOM element using jQuery.
Clearing Inline CSS Properties With jQuery


Andrew Trice posts the transcript from the open Q&A session on PhoneGap that he held with Raymond Camden as part of Adobe Tech Live.
Transcript from Open Session On PhoneGap

Raymond Camden shares a new PhoneGap sample that demonstrates the accelerometer API.
PhoneGap Sample - Shake to Roll

Andrew Trice talks about the tools and workflow he uses to build apps with PhoneGap.
My Workflow for Developing PhoneGap Applications

New and Updated Libraries and Frameworks

jQuery UI 1.10.0 includes a number of important API redesigns and fixes dozens of bugs.
jQuery UI 1.10.0

Voxel.js is an engine for building Minecraft-like games that is built upon Three.js, WebGL and Node.
Voxel.js: A Minecraft-like Block Based Game Engine Using Three.js, WebGL and Node

scrollMonitor allows you to monitor elements during scroll by receiving events when elements enter/exit the viewport.

Andy Matthews new jQuery Mobile Icon Pack includes a builder that allows you to choose only the icons you need, saving on precious file size.
Build custom icon fonts with Builder for jQuery Mobile Icon Pack

Audio5js is a cross-browser Javascript API for HTML5 Audio with a Flash fallback for browsers without MP3 playback support.

John Resig released his i18n module for Node and Express.js and shows how to get it running.
i18n Module for Node and Express.js

Textarea-helper is a small helper library for mirroring textarea content that lets you do things like get the content height or caret position.

jQuery 1.9 includes a streamline API among other features while jQuery 2.0 beta cuts the library size down by 10%.
jQuery 1.9 final, jQuery 2.0 beta, Migrate final released

Basket.js caches JavaScript files in LocalStorage rather than the browser's built-in cache, which has been shown to perform faster.
Basket.js: A JavaScript Loader With LocalStorage-based Script Caching

Dejavu is another library that adds classical inheritance-like features on top of JavaScript prototypal inheritance.

Automaton is a task automation tool for JavaScript and Node similar to Grunt.


Keep up with all the great articles and tutorials posted to the Adobe Developer Connection on the topics of HTML, CSS, JavaScript, PhoneGap and more by signing up for my monthly newsletter.
ADC Web Standards Monthly Update

Alan Greenblatt continues his on using WordPress for enterprise application development by showing how you can expose WordPress via a REST API using hte wp-mvc plugin.
Building a REST interface with WordPress

Raymond Camden introduces Beautify, a Brackets extension that wraps the JS Beautifier open source project.
JS Beautifier Code Formatting Extension for Brackets


Brian Swartzfager Surprised there's no mention of the new jQuery plugin registry site announced by the jQuery team last week:

Posted By Brian Swartzfager / Posted on 01/21/2013 at 7:56 AM

Write your comment

(it will not be displayed)


My name is Brian Rinaldi and I am the Web Community Manager for Flash Platform at Adobe. I am a regular blogger, speaker and author. I also founded RIA Unleashed conference in Boston. The views expressed on this site are my own & not those of my employer.