HTML5 Zone is brought to you in partnership with:

Brian Rinaldi is a developer and community manager focused on HTML, CSS, JavaScript and Mobile development. He works at Adobe and is a frequent author and speaker. He blogs at http://remotesynthesis.com and runs a web and mobile developer focused publication at http://flippinawesome.org. Brian is a DZone MVB and is not an employee of DZone and has posted 34 posts at DZone. You can read more from them at their website. View Full User Profile

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

03.27.2013
| 2429 views |
  • submit to reddit

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!

Tutorials

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

Mobile

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.
shurikenJS

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.
jquery.panzoom

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.
Chart.js

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.
Mobify.js

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

Etc.

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

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



Published at DZone with permission of Brian Rinaldi, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)