Best of JavaScript, HTML & CSS – Week of July 1, 2013
The modern web is always changing, and this article is more than two years old.
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.
Tutorials
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?
Mobile
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.
busboy
minimit-anima is a jQuery plugin to animate with CSS3 transforms and transitions with fallback for older browsers.
minimit-anima
PivotTable.js is a Javascript Pivot Table library with drag-and-drop functionality built on top of jQuery/jQueryUI.
pivottable
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.
it.js
ElementTransitions.js wraps some code on page transitions by Codrops but allows more than one animatable element per page.
ElementTransitions.js
Voyeur is a Javascript library for transversing and manipulating the DOM.
Voyeur.js
Primus is a real-time server abstraction for e SockJS, Engine.IO or maybe just use pure WebSockets.
Build first, decide later
Etc.
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
