Best of JavaScript, HTML & CSS – August 5, 2013
The modern web is always changing, and this article is more than two years old.
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.
Tutorials
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
Mobile
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.
CardView
git-html5.js is a JavaScript Git client library that implements a complete Git workflow that can be run in browser.
git-html5.js
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.
polyfill
Pancake.js is a JavaScript library for flattening SVG and Canvas elements into images on the fly.
pancakejs
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.
Conditioner.js
Signature Pad is a canvas-based library for drawing smooth signatures on touchscreens and desktop browsers.
Signature Pad demo
Etc.
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?
