Best of JavaScript, HTML5 & CSS3 - Week of February 18, 2013

Posted on Feb 25, 2013

It would seem I picked the wrong week to go on vacation (especially one where I had zero Internet access). This post covers two very eventful weeks worth of content. First, there were a ton of new product and project releases including Edge Reflow, Edge Code/Brackets, Edge Animate, Grunt, Yeoman, jQuery Mobile, CreateJS and much more. Of course, there were also a ton of tutorials and other outstanding articles over these weeks. I know it’s a lot of reading - but I guarantee you’ll learn a lot!

Tutorials

Jonathan Creamer explains asynchronous event-based programming in JavaScript.
Event Based Programming: What Async Has Over Sync

Ariya Hidayat explains how ECMAScript 6 will allow a function declaration to specify a default value for every parameter.
ECMAScript 6 and Default Argument

My latest post looks at the techniques and frameworks you can learn from the Brackets HTML, CSS and JavaSCript open source code.
Learning from the Brackets Open Source Code

Ian Devlin looks in detail at the HTML5 progress element.
The progress element

David Walsh shows how scoped attribute of style lets you apply styles to only the host and descendant elements.
CSS Scoped Styles

Dialog boxes are very common but usually not accessible. Nicholas Zakas shows how you can solve the accessibility problem with minimal code.
Making an accessible dialog box

Johnny Simpson continues his in depth guide to SVG, with Part 2 looking deeper at things like structure and styling.
What is SVG? [Guide to SVG Part 2]

Johnny Simpson shows how he created an image slider that creates a 3D effect using CSS 3D transforms.
Experimental CSS3 Only Image Slider with 3D Transforms

David Walsh shows how to create a sheen effect on an image using CSS transitions.
Create a Sheen Logo Effect with CSS

David Walsh demonstrates how to use a method for creating animations in CSS using PNG spritesheets to recreate a game animation from the original Street Fighter game.
Build a Street Fighter Demo with CSS Animations and JavaScript

Sandeep Panda demonstrates how the HTML5 WebSockets API can be used to create real-time web applications.
Introduction to the HTML5 WebSockets API

Louis Lazaris shares strategies for using whitespace to make your HTML and CSS code more readable.
Using White Space For Readability In HTML And CSS

Chris Coyier shows how to weave together the old and new flexbox syntaxes to maximize browser support.
Using Flexbox: Mixing Old and New for the Best Browser Support

Libraries and Frameworks

Bermon Painter begins a tutorial series discussing using CSS pre-processors and focusing specifically on Sass.
Introduction to Sass: Part 1 – Installation

Chris Griffith shows how to use Modernizr to make your applications for feature-detection.
Up and running with Modernizr

Joe Zim created an introduction to using Backbone.Marionette which aims to make Backbone development simpler.
A Thorough Introduction To Backbone.Marionette

Glenn Gervais digs into AngularJS modules using a sample app that filters a list of data based upon user input.
Angular Intro to Modules, Services, Factories, and Filtering

Glenn Gervais explains how to work with an XML data source within AngularJS.
Angular and XML? No Problem!

Jonathan Creamer shows how to use Anvil.js' Anvil.template to create static web pages using handlebars or underscore.js templates.
Creating a static web site with Anvil

Jack Franklin post the first episode in a video tutorial on building an app with Express and Backbone.
Building an App with Express and Backbone: Part 1

See how to create animations for the web that perform well on desktop and mobile using the Collie JavaScript library.
Introducing Collie: A high-performance animation library for JavaScript

Raymond Camden shares a sample application he built that will plot out the distances from multiple locations to a single destination.
Google Map/Directions Mashup

Darius Kazemi shows how he built an 80’s rap battle generator application with Backbone using the Wordnik API.
Making a RapBot with JavaScript

Alex Young continues his backbone tutorial series.
Backbone.js Tutorial: Testing with Mocks

Mobile

Aurelio De Rosa continues his series on building a currency converter app with jQuery Mobile and Cordova.
Build a Currency Converter with jQuery Mobile and Cordova: JavaScript and User Setting

Raymond Camden takes a closer look at a few config.xml settings you may not be aware of and shows what they do.
Some examples of Android PhoneGap Config Settings

Andrew Trice and Raymond Camden hosted another open Q&A session about PhoneGap and have posted the transcript.
Transcript from Open Session On PhoneGap

Aurelio de Rosa continues his tutorial series with this edition covering the classes that save, load, and complete currency operations.
Build a Currency Converter with jQuery Mobile and Cordova: Translation and Conversion Logic

New and Updated Libraries and Frameworks

Grunt version 0.4 was released and includes major changes including no built-in tasks, a new Grunt CLI tool and new, more powerful Gruntfiles.
Tearing Grunt Apart

New versions of the CreateJS JavaScript libraries have been released including a new common event model and improved documentation.
New versions of CreateJS released!

Polyfilter is a CSS filters polyfill that supports Webit browsers, Firefox and IE 6-9.
CSS-Filters-Polyfill

Roole is a language that compiles to CSS (like Sass or LESS) implemented in JavaScript so it can run on Node or in the browser.
Roole

Textillate.js is a simple plugin for doing some very cool CSS3-based text animations.
Textillate.js

Threesixty-slider is a jQuery plugin to create 360 degree product image slider.
Threesixty-slider by creativeaura

Peter Keating has open sourced the “walking skeleton” from a recent project that can be used as a starting point for HTML/CSS/JS applications and supports automated build processes.
Walking Skeleton for Web Applications

The jQuery Mobile 1.3.0 release focused on improving support for responsive web design and includes a bunch of new widgets.
jQuery Mobile 1.3.0 Released

Durandal is a new single page application framework built upon jQuery, Knockout and Require.
Durandal

asm.js is a new library created by developers at Mozilla that aims to be a highly optimized subset of JavaScript that targets compilers like Emscripten.
asm.js: A Low Level, Highly Optimizable Subset of JavaScript for Compilers

Dr. Axel Rauschmayer goes through the spec for asm.js in great detail.
asm.js: closing the gap between JavaScript and native

Holla is intended to make it easier to create peer-to-peer video and voice applications via WebRTC.
holla

PeerJS is an abstraction of WebRTC intended to make it easier to create peer-to-peer data applications in the browser.
PeerJS

The new beta of Yeoman includes improved install times, better compatibility with Grunt and existing projects, the ability to make everything configurable and much more.
Yeoman 1.0 Beta: Faster, More Configurable, Now Available For Testing

Etc.

Marko Dugonji? has created an experimental concept of responsive typography based on face detection and head tracking.
Responsive Typography Demo

Version 1.5 of Adobe Edge Animate was released and includes CSS built-in filters, gradient support and typography enhancements including support for Edge Web Fonts.
Adobe Edge Animate 1.5 is here, bringing new design capabilities to the web

The latest Brackets build includes numerous code editing and code hinting improvements such as the ability to double and triple-click-drag to select words and lines and new support for Haxe.
Brackets Sprint 20 Build

Adobe released a preview release of a new tool called Edge Reflow which allows you to build responsive designs visually.
Introducing Adobe Edge Reflow

Chris Griffith shows how you can get started building responsive designs with Edge Reflow.
Introducing Edge Reflow Preview

Mihai Corlan posts a tutorial on learning to use Reflow.
A new tool for designing Responsive Web Design websites

Dirk Schulze discusses some proposals for fill and stroke on text via SVG.
Improving CSS text decorations

Comments

There are currently no comments for this entry...be the first!

Write your comment



(it will not be displayed)







About

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.