Best of JavaScript, HTML & CSS – Week of October 21, 2013



A lot of great tutorials and releases this week – let me highlight a few? Do you know what monads are and why they are useful? Sean Voisen explains. Try to see the stereoscopic effect created with just CSS by Donovan Hutchinson (now try without getting a headache). Snap.svg is to SVG what jQuery is to the DOM. Of course, there’s much more so read on.


A real-world explanation of monads in JavaScript by Sean Voisen including what they are and why they are useful.
A Gentle Introduction to Monads in JavaScript

A detailed walkthrough on how to use the Web Audio API and JavaScript to create sounds and music by Keith Peters.
Audio Synthesis in JavaScript

Can you see the stereoscopic 3D effect that Donovan Hutchinson created with CSS? I did, eventually.
Stereoscopic CSS

Razvan Caliman explains how CSS Shapes were used to enhance visual storytelling for an “Alice in Wonderland” demo.
Using CSS Shapes to Enhance Visual Storytelling

Pete Herlihy examines how many visitors miss out on JavaScript enhancement by analyzing traffic to a UK gov’t site.
How many people are missing out on JavaScript enhancement?

Multiple examples of using CSS animations to transitions images in thumbnail grids by Mary Lou.
Animations for Thumbnail Grids

Part 2 of Raymond Camden article covering using IndexedDB and handling CRUD for building a sample note app.
Working With IndexedDB – Part 2

Nick Janssen discusses how he built a 3D MMO called Ironbane in the browser using WebSockets.
Building a 3D MMO Using WebSockets

Great post by Sara Soueidan and Bennett Feely about creating icons that animate and transform using CSS.
Navicon Transformicons: Animated Navigation Icons with CSS Transforms

Libraries and Frameworks

Donovan Hutchinson takes you through all the steps needed to build a fully functioning blog using static pages compiled with Jekyll.
Building a Blog with Jekyll

Shawn Jansepar demonstrates how Mobify.js can automatically resize and compress img and picture elements.
Automate Your Responsive Images With Mobify.js

See how to convert a site from dynamic to static and deploy with HarpJS from Raymond Camden.
Moving from dynamic to static with Harp

Another good overview of Ghost installation and features from Andy Matthews.
New Millennium Blogging with Ghost

Some exploration of how to begin achieving responsive data visualizations using d3.chart.js by Irene Ros.
Towards Responsiveness with d3chartjs

Kyle Simpson says we can do better than the current state of float in CSS for positioning.
After: Float


Rober Biggs walks through building a simple application using the ChocolateChip UI framework.
Introduction to ChocolateChip-UI

New and Updated Libraries and Frameworks

Regenerator lets you use ES6 generator functions today by replacing them with ES5 that behaves the same way.

Touche.js allows you to re-map click events to touch events on touchscreen UI’s.
Touche.js – seamless touch event mapping for your click events

Trans is a JavaScript library that aims to make it easy to transform complex JSON objects.

Snap.svg is a JavaScript library to simplify working with SVG assets and works with SVG from tools like Illustrator.

Falcon.js adds models, collections, and views to Knockout.
Falcon.js – Structure for Knockout

Mean is a boilerplate for MongoDB, Node.js, Express, and AngularJS based applications.

GoAngular is an open-source GoInstant binding for AngularJS to build real-time, multi-user applications.

HTML5 Admin is a responsive administration template created with Bootstrap version 3. Requires paid license.
HTML5 ADMIN – HTML5 Admin Template using Bootstrap 3


The latest episode of the Topic Undefined features debate on Backbone 1.1.0, Ghost, iOS7 issues, Mario and more.
Topic Undefined – Episode 6

Nick Robson explores the growing use of horizontal designs in web design and what makes a good horizontal layout.
Using Horizontal Design for Websites

Leave a Comment