Over a million developers have joined DZone.

Best of JavaScript, HTML & CSS - Week of April 8, 2013

DZone's Guide to

Best of JavaScript, HTML & CSS - Week of April 8, 2013

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

A lot of general, framework-less HTML, CSS and JavaScript tutorials this week and a lot of newly released libraries. Also, please be sure to check out the three new articles that just launched on my new site for web developers: FlippinAwesome.org.


Steve Souders takes a look at how different browsers behave with the HTML5 video preload attribute.
HTML5 Video Preload

Thomas Reynolds takes a look at how the Google I/O 2013 experiments for animation with organic motion were built.
Case Study: Google I/O 2013 Experiment

Chris Mills creates an advanced cross-browser flexbox example that addresses differing levels of flexbox support.
Advanced cross-browser flexbox

A good crash course on CSS transitions from Paula Borowska.
All the Glory of CSS Transitions

Peter Gasston discusses the new HTML template element showing how to use it today in Chrome Canary & Firefox nightly.
Introducing HTML's new template element

Christian Cantrell shows some CSS regions and exclusions demos running on Chrome for mobile.
CSS Regions and Exclusions on Mobile

Razvan Caliman explains how you can use CSS Regions to create adaptive layouts where controls flow into regions.
Adaptive Web App UI with CSS Regions

Ben Nadel experiments with a method for determining the type of JavaScript variable.
Looking At Prototypal Inheritance To Determine Data Types In JavaScript

Gabriele Romanato explains a number of ways you can utilize CSS generated content.
How To Benefit From CSS Generated Content And Counters

Ariya Hidayat explains how most modern browsers will automatically inline certain JavaScript functions for performance reasons.
Automatic Inlining in JavaScript Engines

Dr. Axel Rauschmayer discusses another JavaScript quirk, that the language has two values that represent an empty value.
JavaScript quirk 2: two "non-values" – undefined and null

Libraries and Frameworks

Sara Soueidan shows how you can recreate the type of animations and visualizations on Windows 8’s home screen using HTML, CSS and JavaScript.
Creating Windows-8-like 3D animations with CSS3 and jQuery

Aurelio De Rosa shows how he built a polyfill for the HTML’s new placeholder functionality as a jQuery plugin.
How to create an advanced HTML5 placeholder polyfill


I continue my series on building your first mobile app by showing how to add new pages to the app with jQuery Mobile.
Create Your First Mobile App with PhoneGap Build – Adding Pages with jQuery Mobile

Shazon Abdullah details what’s new in Cordova iOS 2.6.0.
What's new in Cordova iOS 2.6.0

New and Updated Libraries and Frameworks

Yeoman releases 1.0 beta 4 including Windows support and refreshed Angular, Backbone and Ember generators.
Yeoman Update: announcing 1.0 beta 4, Windows support, Refreshed Angular, Backbone, Ember generators

The Brackets Sprint 23 build is available and includes live highlighting for HTML and a new toolbar.
Brackets Sprint 23 Build

Helium is a JavaScript tool that scans your site to find and display unused CSS.

Andy Matthews revives an abandoned jQuery plugin called Sticky which allows you to easily create notifications.
Sticky-Seriously simple notifications for jQuery

Matt Baker explains functional reactive programming and how to use the Reactive.js library to do this in JavaScript.
Reactive.js: Functional Reactive Programming in Javascript

Responsive Nav is a JavaScript plugin to create a toggled navigation for small screens using touch events and CSS3 transitions.
Responsive Nav — Responsive Navigation Plugin

Squel.js has an API for creating SQL query strings in Javascript, recommended for server side JS development.
Squel.js - SQL query string builder for Javascript

Collage.js is a framework for building interactive collages on a limitless two-dimensional canvas.

Lungo is an HTML5 cross-device framework by Tapquo that is available for iOS, Android, Blackberry and FirefoxOS.
Lungo - HTML5 Cross-Device Framework


Addy Osmani covers using the Chrome DevTools Heap Profiler and Timeline Memory views to diagnose memory leaks.
Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools

My latest article for Inspire shows you how to get started building responsive web designs using Adobe Edge Reflow.
Building responsive web designs with Adobe Edge Reflow

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}