Over a million developers have joined DZone.

Best of JavaScript, HTML & CSS - Week of March 18, 2013

DZone's Guide to

Best of JavaScript, HTML & CSS - Week of March 18, 2013

· Web Dev Zone ·
Free Resource

A true open source, API-first CMS — giving you the power to think outside the webpage. Try it for free.

There were so many tutorials and releases this week, that I could barely keep up (plus, PAX East delayed me a bit, honestly, which didn't help). A lot of tutorials seemed to focus on neat CSS tricks or cutting-edge features that aren't widely implemented yet, but still worth getting to know. There were a lot of newly released and updated libraries, notably Backbone hit 1.0. Enjoy!


Stephen Bradley goes into detail on how to work with the new flexbox specification to create flexible layouts.
Working with flexbox

Ariya Hidayat on how the ECMAScript 6 method definition eliminates the need to use function when creating JavaScript objects.
ECMAScript 6 and Method Definitions

Chris Coyier shows how to automatically generate the table of contents for a long page using JavaScript.
Automatic Table of Contents

Peter Keating shows how you can use WebP images to save bandwidth but still support browsers without WebP support.
Reducing Page Size with WebP

Lea Verou shows how to create iOS6 style switches using just checkboxes and CSS.
iOS 6 switch style checkboxes with pure CSS

Mary Lou shows how to create a thumbnail grid with an expanding image preview using HTML, CSS and jQuery.
Thumbnail Grid with Expanding Preview

Raymond Camden explores the module design pattern in JavaScript.
JavaScript Design Patterns - The Module Pattern

Eric Bidelman continues the series about shadow DOM covering using multiple shadow roots, obtaining a host's shadow root and more.
Shadow DOM 301: Advanced Concepts & DOM APIs

Eric Bidelman shows how to use the :scope selector to limit the matches in a querySelector.
What's the CSS :scope pseudo-class for?

David Walsh explains why he likes to use functions that return functions and shows a use case.
JavaScript Functions that Return Functions

Chris Coyier shows how to utilize the pulltab on a textarea to create a cool CSS trick.
Tricky Textarea Pulltab

Lea Verou shows a new method for vertically aligning text in a container of variable dimensions.
Easily center text vertically, with SVG!

Lea Verou created an app to let you test the CSS border-corner-shape, simulated in SVG, before it is implemented.
Preview border-corner-shape, before implementations!

Paul Lewis shows you what you need to know to get started building CSS Custom Filters.
Introduction to Custom Filters (aka CSS Shaders)

Libraries and Frameworks

David Walsh demonstrates how the X-Tag project detect vendor prefixes in the browser using JavaScript.
Detect Vendor Prefix with JavaScript

Neeraj Khanna goes deeper into explaining the RaptorJS toolkit from ebay for building modules and UI components.
Introducing RaptorJS

Learn all about AngularJS from Holly Schinsky while building a cool sample app using the iTunes search API.
Fun with AngularJS!

Mihael Konjevic shows how to persist data to the server using queued requests in the CanJS framework.
Weekly Widget 6 - Instantaneous Web Apps

Joe Zim covers some of his favorite Backbone extensions, Marionette, Validation LayoutManager and ModelBinder.
Make Backbone Better With Extensions


Andy Trice explains how to enable and use on-device debugging of PhoneGap apps for iOS 6.
On-Device Debugging With PhoneGap & iOS 6

Raymond Camden discusses building more robust PhoneGap apps through better handling of online and offline connections.
Building "Robust" PhoneGap Applications

Christophe Coenraets created pageslider.js, a micro library to help provide hardware accelerated page transitions in your mobile web and PhoneGap apps.
Hardware-Accelerated Page Transitions for Mobile Web Apps / PhoneGap Apps

Andrew Trice shares PhoneGap Legends, a game demo of a top-view RPG implemented entirely in HTML, CSS, and JavaScript and packaged with PhoneGap Build.
PhoneGap Legends – A Sample Game App

Christophe Coenraets releases Sociogram Mobile, a sample PhoneGap application that demonstrates how to use the Facebook JavaScript SDK and the Graph API.
Sociogram Mobile: A Starter-Kit Application for PhoneGap and Facebook Integration

New and Updated Libraries and Frameworks

Jeremy Ashkenas announces that Backbone 1.0 is official. He discusses its history and what to expect beyond 1.0.
Backbone 1.0

shurikenJS by Stephan Fischer is a JavaScript framework using the newest ECMA instructions with compatibility for older browsers.

jQuery.Feedback is a clone of the Branch's feedback widget that you can add to your own site.
jQuery.Feedback by siong

Panzoom is a jQuery plugin for panning/zooming on any element using CSS transforms/matrix for GPU acceleration.

Louis Lazaris created thatsNotYoChild.js to fix situations where child objects inherit the parent's opacity in CSS.
thatsNotYoChild.js -- Fixing Parent-Child Opacity

Chart.js is a new, dependency free, HTML5-canvas-based charting library.

Version 2.0 of Mobify.js was released as a developer preview. It is an open source library for capturing and manipulating your site's DOM before any resources have downloaded.

Minimail is your open source email app for mobile using PhoneGap.


Superhero.js is a great resource site for understanding JavaScript and learning to build/test large JS applications.

Mihai Balan updates his CSS Regions feature support matrix, overcoming some issues with the initial implementation.
Regions feature support matrix revisited – keeping it clean

I am looking for great authors again on web and mobile development, but for something new and exciting!
Call for Authors - Web and Mobile Development

Paul Roget discusses the future of Firefox DevTools and the top priorities and new features for the DevTools team.
Future of Firefox DevTools

The New Standard for a Hybrid CMS: GraphQL Support, Scripting as a Service, SPA Support. Watch on-demand now.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}