Best of JavaScript, HTML & CSS – Week of September 9, 2013
The modern web is always changing, and this article is more than two years old.
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
