Best of JavaScript, HTML & CSS – August 5, 2013



This week features a bunch of framework-specific tutorials and new library releases (and updates) as well as updates to all the Adobe Edge products such as Reflow, Brackets/Edge Code and Edge Animate.


Mathew Carella shares tips for writing better and more efficient CSS.
Writing Better CSS

Krasimir Tsonev walks through techniques for animating in HTML using JavaScript, CSS and the Animate.CSS library.
Introduction to Animating in HTML

Dr. Axel Rauschmayer shows how JavaScript regular expression functions behave differently with /g flag set.
The flag /g of JavaScript’s regular expressions

Keith Clark shows how to select elements in the last row of a grid, both balanced and unbalanced, using CSS selectors.
Targeting first and last rows in CSS grid layouts

Sara Soueidan posts an article on building a circular navigation using CSS transforms with a cool interactive demo.
Building a Circular Navigation with CSS Transforms

Tyler Smith shares a screencast with sample code showing how to use the Web Speech API to create voice driven games.
Using the Web Speech API to Create Voice Driven HTML5 Games

Louis Lazaris explains some useful but often overlooked features of CSS like inherit, initial, unset and all.
Language-wide Features in CSS

Tom Trenka shows how to resize an image on the client-side then upload using canvas, JavaScript and the File API.
Resize an Image Using Canvas, Drag and Drop and the File API

Joshua Clanton shows how JavaScript compatibility shims work and how you can build your own.
An Introduction to Writing Your Own JavaScript Compatibility Shims

Mary Lou shares some subtle but excellent link effects that use CSS pseudo-elements and animations.
Creative Link Effects

Stephen Shaw shows how to achieve absolute horizontal and vertical centering using just a little bit of CSS.
Absolute Horizontal And Vertical Centering In CSS

Dr. Axel Rauschmayer shows all the ECMAScript 6 callable entities and explains their current ECMAScript 5 equivalents.
Callable entities in ECMAScript 6

Libraries and Frameworks

Jonathan Fielding explains how SimpleStateManager let’s your JavaScript code react to responsive design state changes.
Coding for Responsive State Changes with SimpleStateManager

Phillip Whisenhunt covers common Backbone problems and some tips and design patterns to overcome them.
Backbone.js Tips And Patterns

Joe Zim details all the major changes in the recent RC1 release of Twitter Bootstrap.
The Huge Update to Twitter Bootstrap

Alan Greenblatt shows some interesting effects that can be created using gradient maps and his gradientmaps.js library.
Advanced Gradient Map Usage

Codeship posted a good screencast overview introducing how to get started Javascript testing with Jasmine.
Testing Tuesday #16: Javascript testing with Jasmine

Krasimir Tsonev shares a number of strategies for organizing web assets and optimizing them for improved performance.
Web Assets – Tips for Better Organization and Performance

Kushagra Gour shares a demo where he created a image gallery as a 3D cube using CSS 3D transforms and Sass.
Creating a 3D Cube Image Gallery

Raymond Camden shows how to use DropBox as directory-serving middleware within an Express application.
Using the Directory-serving middleware in Express


Andrew Trice discusses his experience porting his Fresh Food Finder PhoneGap app to Firefox OS.
Porting A PhoneGap App To Firefox OS

New and Updated Libraries and Frameworks

Matteo Spinelli posted CardView, a control to browse through a collection of items in a manner like a rolodex.

git-html5.js is a JavaScript Git client library that implements a complete Git workflow that can be run in browser.

The Brackets Sprint 28 Build includes a new extension registry, Linux preview builds, native drag and drop and more.
Brackets Sprint 28 Build

polyfill is a service to selectively polyfills what the browser needs and can be used over HTTP/HTTPS connections.

Pancake.js is a JavaScript library for flattening SVG and Canvas elements into images on the fly.

gradientmaps.js is a Javascript library that allows you to apply gradient maps to any HTML element on the page.
gradientmaps.js – Gradient Maps for the Web

Conditioner.js is a JavaScript library for loading and unloading behavior based on environment conditions.

Signature Pad is a canvas-based library for drawing smooth signatures on touchscreens and desktop browsers.
Signature Pad demo


In Episode 3 of the Topic Undefined podcast, Raymond Camden and I disagree on important developer issues. Guess who’s right? No, I meant me.
Topic Undefined – Episode 3

This experiment shows over 1 million particles being moved around on the GPU using WebGL.
Experiments in Code

The Edge Animate CC update fixes compatibility issues with IE11.
Update to Edge Animate CC is here, fixing compatibility issues with IE11

The latest update to Edge Code CC includes Kuler integration.
Update to Edge Code CC Available Now

The latest release of Edge Reflow adds multi-page comps, in-app preview mode and more.
Single page comps?

Leave a Comment