Best of JavaScript, HTML & CSS – Week of July 8, 2013
The modern web is always changing, and this article is more than two years old.
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
