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



In addition to the usual list of excellent tutorials (Codrops and CSS Tricks seemed especially busy), this week features a number of interesting new libraries.


Afshin Mehrabani shows how to use CSS fallback properties to provide support for missing CSS3 features in legacy browsers.
Using CSS Fallback Properties for Better Cross-browser Compatibility

Aurelio De Rosa examines potential solutions for supporting custom font use within media queries that falls back nicely on slower mobile connections.
Solving the Problem of @font-face Inside Media Queries

Donovan Hutchinson shows how to create a variety of 3D spheres using CSS transforms and animations.
CSS Spheres

Mary Lou shares some concepts for using CSS animations when loading new grid items as the user scrolls.
Loading Effects for Grid Items with CSS Animations

David Walsh shows how to dynamically add and remove styles directly to a stylesheet using JavaScript.
Add Rules to Stylesheets with JavaScript

Dr. Axel Rauschmayer explains how iterators and generators work in ECMAScript 6.
Iterators and generators in ECMAScript 6

Francesco Trillini creates an experimental, interactive particles slideshow using HTML5 canvas.
Interactive Particles Slideshow

Mary Lou shows a variety of ways to use custom data attributes and pseudo-elements to add attractive image captions.
Using Custom Data Attributes and Pseudo-Elements

Krasimir Tsonev demonstrates how to developing Google Chrome Extensions using HTML and JavaScript.
Developing Google Chrome Extensions

Chris Coyier shows various means of swapping out text in an HTML element using jQuery, plain JavaScript and CSS only.
Swapping Out Text, Five Different Ways

Johnny Simpson shows how to activate a CSS animation within a sticky page header when the user scrolls down.
Scroll Activated Fixed Header Animations

Libraries and Frameworks

Brian Kardell explains what Hitch.js is, how to use it and why it is potentially important.
An Intro to Hitch.js and the Extensible Web

Fiona Chan shares a Sass mixin that will convert the input px to rem.
Easy-peasy Rem Conversion with Sass

Pamela Fox discusses unit testing, integration testing, regression testing and manual testing Backbone front-ends.
Testing Backbone Frontends

The Filament Group show you everything you need to know to make the switch from font icons to SVG using Grumpicon.
A Designer’s Guide to Grumpicon, or: How I Learned to Stop Using Font Icons and Love SVGs

Krasimir Tsonev extends Jasmine to fix HtmlReporter rendering, modify support for asynchronous operations and more.
Extending Jasmine (BDD framework for testing)

Pamela Fox explains the criteria she uses when deciding whether to use a JavaScript library or not.
Which JavaScript Library Should I Pick?


Simon MacDonald walks through the JavaScript code to backup, remove and restore contacts using PhoneGap.
Backup, Remove and Restore your Contacts using PhoneGap

New and Updated Libraries and Frameworks

busboy is a Node.js module for parsing incoming HTML form data.

minimit-anima is a jQuery plugin to animate with CSS3 transforms and transitions with fallback for older browsers.

PivotTable.js is a Javascript Pivot Table library with drag-and-drop functionality built on top of jQuery/jQueryUI.

Aristochart is customizable and flexible line charting library for canvas with a number of community sourced themes.
Aristochart – Sophisticated Javascript charts.

it.js is a library to make it easier to create chainable accessor/iterator functions.

ElementTransitions.js wraps some code on page transitions by Codrops but allows more than one animatable element per page.

Voyeur is a Javascript library for transversing and manipulating the DOM.

Primus is a real-time server abstraction for e SockJS, Engine.IO or maybe just use pure WebSockets.
Build first, decide later


Check out the top HTML, CSS, JavaScript and Mobile Content in June on Flippin’ Awesome.
June’s HTML, CSS, JavaScript and Mobile Content on Flippin’ Awesome

Nicholas Zakas explains some important things not coming in Internet Explorer 11 to make it more standards compliant.
Internet Explorer 11: “Don’t call me IE”

The July edition of Appliness is out and features an interview with Nicole Sullivan and many tutorials (including one from me).
Appliness July is out

Leave a Comment