Best of JavaScript, HTML & CSS – Week of September 9, 2013

A wide variety of tutorials and projects this week as well as updates to Edge Reflow and Photoshop (including the Node.js-based Photoshop Generator).

Tutorials

Structure and Interpretation of Computer Programs with programs written in JavaScript that can be executed inline.
Structure and Interpretation of Computer Programs

Horia Olaru announces a CSS Blend Modes Support Matrix detailing browser support for all pieces of the spec.
Browser Support Matrix for CSS Blend Modes

Raymond Camden posts the first part in a series detailing how to work IndexedDB.
Working With IndexedDB

Johnny Simpson shares a variety of CSS only custom checkboxes with different look and feels.
A Bunch of CSS Only Custom Checkboxes

François Zaninotto implements client-side search filtering in pure CSS.
Client-side full-text search in CSS

Jon Rundle discusses two examples of how to approach complex navigation on large, responsive websites.
Responsive Navigation On Complex Websites

Alan Greenblatt shows how you can use CSS clip paths (only supported in Chrome right now) to create complex clip paths.
Interactive CSS Clip Paths

Dr. Axel Rauschmayer explains why it isn’t a good idea to put data in prototype properties in JavaScript.
Anti-pattern: data in prototype properties

Raymond Camden shows how to display a list of files to be uploaded when using a multi-file upload HTML control.
Adding a file display list to a multi-file upload HTML control

Nicholas Zakas walks through ECMAScript 6 arrow function syntax and usage.
Understanding ECMAScript 6 arrow functions

Kirupa Chinnathambi explains how to use JavaScript to have your application be aware of an inactive user.
Detecting If the User is Idle or Inactive

Alan Greenblatt shows an example of using Blend Modes when drawing on a Canvas.
Photoshop Blending in a Canvas

Andrei Parvu explains the mask-repeat and background-repeat values of round and space in the CSS Masking and CSS Backgrounds and Borders specifications.
Repeat space and round available  for mask-repeat and  background-repeat properties in Webkit

Libraries and Frameworks

Burke Holland walks through new features and changes in Bootstrap 3 related to how it approaches responsive design.
Break The Wrist And Walk Away: Responsive Design And Bootstrap 3

Andrew Hushbeck shows how to use and how he built FruitJS, a Node.js utility to convert Markdown documentation into an HTML site.
A Taste of FruitJS

This tearable cloth demo written with LLJS and ported to compile in asm.js is pretty impressive looking stuff.
lljs cloth demo

Stoyan Stefanov shows how you can use Facebook’s React to create and update an HTML table in the DOM.
Reactive table

Jim Cowart shares five really useful things learned through experience when working with RequireJS.
Five Helpful Tips When Using RequireJS

Jerome Etienne shows an impressive demo with a tutorial on building a 3D globe using WebGL and three.js.
How to Make the Earth in WebGL?

Mobile

Holly Schinsky clarifies any confusion around how to set icons and splash screens using the PhoneGap 3.0 CLI.
PhoneGap – Icons and Splash Screens Help

Christophe Coenraets shows how to upload files from a PhoneGap Application via a sample app that uploads photos to a Node.js server.
How to upload pictures from a PhoneGap Application to Node.js (and other servers)

Thomas Fuchs discusses the styling and typography that can make your web app have an iOS7 look and feel.
How to create a web app that looks like a iOS7 native app (Part 1)

New and Updated Libraries and Frameworks

Chirp is a Javascript chiptune player, which can be embedded in your game, and composer for creating the music.
Chirp – javascript chiptune composer

Louis Lazaris created QuestionMark.js, a script that display shortcut key definitions in a modal window.
QuestionMark.js — Shortcut Keys Displayed with a Shortcut Key

animo.js let’s you stack CSS animations, specify callbacks for the completion or fire animations on any event.
animo.js

Perimeter.js is a library that creates an invisible perimeter around a target element and monitors mouse breaches.
Perimeter.js: Creates an invisible perimeter around a target element and monitors mouse breaches.

Completely is a JavaScript library for autocompletion with no dependencies.
completely.js

Etc.

I argue that the web development community’s heavy focus on tools is detrimental and we need to adjust it to results.
Stop Focusing on Tools

Tom Krcha shows how to receive bitmaps from Photoshop and process them in Adobe Generator using Node.js.
Adobe Generator: Getting a layer bitmap

Paul Trani demonstrates how to extract CSS, export image assets from layers and generate a Reflow file, all from a PSD.
Generate Web Assets from Photoshop

This article by Tom Krcha shows how you can use Node.js and Adobe Generator to create a plugin for Photoshop.
Script your first Adobe Generator plugin for Photoshop

Paul Lewis walks through the new Canvas inspection panel in Chrome Dev tools.
Canvas Inspection using Chrome DevTools