Best of JavaScript, HTML & CSS – Week of July 8, 2013

This week features lots of CSS from maintaining aspect ratios in CSS to CSS custom filters to a CSS media query generator and a new CSS Regions working draft. Of course, there’s plenty of JavaScript and HTML too, including (of course) some new JavaScript frameworks. Enjoy.

Tutorials

Alan Greenblatt shows how you can use SVG Filters to create effects like edge detection, gaussian blur, sharpen and more.
Fun with SVG Filters

Marc Hinse shows how to make responsive containers that maintain their aspect ratio using pure CSS.
Height equals width with pure CSS

Louis Lazaris details the properties and method within the HTML5 History API.
HTML5 History API: A Syntax Primer

John Allsopp defends the use of the ID attribute in HTML and, to some degree, using ID selectors in CSS.
In defense of the humble id attribute

Ariya Hidayat explains the new ECMAScript 6 Proxy feature that allows you to intercept operaions on an object.
ECMAScript 6 and Proxy

Marco Barria explains how he built a really attractive book animations using CSS 3D Transforms.
Animated Books with CSS 3D Transforms

Dr. Axel Rauschmayer looks at two common performance optimizations used with ‘for’ loops to see if they really are faster.
Performance optimizations and for loops

Johnny Simpson explains CSS Custom Filters and shows some examples of how they can be used.
CSS Custom Filters

David Walsh shows how to add keyboard shortcuts to your web application using the Mousetrap library.
Create Keyboard Shortcuts with Mousetrap

Krasimir Tsonev created a function to chain JavaScript functions, calling an array of function calls sequentially.
JavaScript: sequencing function calls

Dr. Axel Rauschmayer shows how various JavaScript functions and methods for working with arrays are affected by holes (i.e. missing array elements).
Array iteration and holes in JavaScript

Libraries and Frameworks

Simon Smith shows how to write more maintainable JavaScript by decoupling event handlers using custom jQuery events.
Decoupling with Custom jQuery Events

Learn how to use Soma.js to write maintainable JavaScript applications with a loosely-coupled architecture from Romuald Quantin.
Soma.js – Your Way Out of Chaotic JavaScript

Shaun Dunne shares how to take screenshots at various viewports, saving the results to disk, using CasperJS.
Responsive Screenshots With Casper

Chris Coyier explains the extends concept in CSS preprocessors, how it works, why and when to use it and some gotchas.
The Extend Concept

Hugo Giraudel explains how he created a Sass mixin to create striped backgrounds using gradients.
Create Striped Backgrounds With Gradients (and a Sass Function)

Simple State Manager is a responsive state manager which allows you to target javascript at different browser widths.
Simple State Manager

Mobile

You can now develop PhoneGap easily within Wakanda Studio using their PhoneGap extension. Saad Mousliki shows how.
Cut Mobile App Dev Time with PhoneGap Wakanda Studio Extension

New and Updated Libraries and Frameworks

Date for Humans by Matthew Mueller is a JavaScript library that lets users input dates in a nice readable format.
Date for Humans

Tabler.js is a JavaScript library for client-side table generation that supports plugins, coming with a few standard.
Tabler by Brandwatch

Luc is another JavaScript framework for browsers and Node that touts its class system and array of utility methods.
Luc

Ring.js is JavaScript library implementing a multiple inheritance model for the JavaScript language.
Ring.js – JavaScript Class System with Multiple Inheritance

Tangle is a JavaScript library for reactive documents, letting users interact with data contained in text on the page.
Tangle: a JavaScript library for reactive documents

Etc.

Get a detailed media query for the device you are on by going to this CSS Media Query Generator.
CSS Media Query Generator

Radu Stavila shares details on the new working draft for CSS Regions from the W3C.
CSS Regions: New working draft