Best of JavaScript, HTML & CSS – Week of August 19, 2013



This week was filled with new and updated libraries and other projects including Yeoman 1.0, Brick, Tridiv, ungit, FlowType and much more. Of course, there were plenty of great tutorials as well, so be sure to check them out.


Ryan Morr explains the difference between scope and context in JavaScript and how they’re used in common design patterns.
Understanding Scope and Context in JavaScript

Matt Baker discusses rules for applying functional programming principles to CSS so it can more effectively scale.
Functional CSS (FCSS)

Ryan Morr explains several solutions for detecting CSS feature support.
Detecting CSS Style Support

WebKit has implemented srcset for responsive images and Mat Marquis explains why he thinks this is very good news.
WebKit Has Implemented srcset, And It’s A Good Thing

Johnny Simpson shows how you can make HTML blocks that explode when clicked using CSS and Javascript.
Exploding Blocks with CSS and Javascript

Dr. Axel Rauschmayer explains why all objects are truthy in JavaScript, even new Boolean(false).
Why all objects are truthy in JavaScript

Dr. Axel Rauschmayer explains three means of protecting objects in JavaScript.
Protecting objects in JavaScript

Libraries and Frameworks

Seth Vincent shares his strategy for deciding when to choose between npm, Bower and component for client-side dependency management.
Choosing Between npm, Bower and component

David Walsh demonstrates how to build the standard Mozilla grid and column structure with a Stylus mixin.
Generate a CSS Grid with Stylus

A new screencast from Codeship walks through how to test Node.js applications using Jasmine.
Testing node.js applications with Jasmine

Joel Hooks examines the ways to configure dependency injection in AngularJS, from a simple service to the factory and provider approaches.
Configuring Dependency Injection in AngularJS

Addy Osmani rewrote the Backbone TodoMVC application using ECMAScript 6 features such as classes, modules and fat-arrow syntax.
Traceur-TodoMVC – a Backbone.js app written with ES6

Brad Barrow shows a workflow for building AngularJS applications using Yeoman, Grunt and Bower.
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower

New and Updated Libraries and Frameworks

FlowType.JS helps create responsive web typography by changing the font-size and line-height based on element width.

8bit.js library lets you write music with 8bit sounds and supports rhythms, instruments, repeating sections and more.

ungit is a nice, web-based Git UI that works well with GitHub. It’s built on Node and installed via NPM.

sonicnet.js can communicate between mobile devices by encoding messages in sound using the Web Audio API.
Ultrasonic Networking on the Web

favcount.js lets you put an incrementing notification count in the otherwise useless favicon of your site.

Tridiv is a web-based editor for creating 3D shapes in CSS.
Tridiv – CSS 3D Editor

Fine Uploader 3.8 file uploader library was released and supports uploading files directly to Amazon S3.
Fine Uploader 3.8 Released

SimpleSlideView is a jQuery or Zepto plugin for the simple, responsive sliding views.
SimpleSlideView: Our Plugin for the Simplest of Sliding Views

Speech Router is a JavaScript library that wraps Chrome’s speech recognition APIs.

Yeoman 1.0 is officially released and this post discusses what’s new and what’s next.
Release the Kraken! – Announcing Yeoman 1.0

Brick by Mozilla is a set of components based on the W3C standard for Web Components.

Fireworm for Node attaches watchers to files but also watches the directories and recrawls them when their contents change.
File Watching with Fireworm and Watch’em


Elaine shows how to use simple timeline animations and easing in Edge Animate to create an interactive banner.
Floral Matchmaker Tutorial #2: Animating with the Timeline

Leave a Comment