Best of JavaScript, HTML & CSS – Week of August 19, 2013
The modern web is always changing, and this article is more than two years old.
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.
Tutorials
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.
FlowType.JS
8bit.js library lets you write music with 8bit sounds and supports rhythms, instruments, repeating sections and more.
8bit.js
ungit is a nice, web-based Git UI that works well with GitHub. It’s built on Node and installed via NPM.
ungit
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.
favcount.js
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.
speech-router
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.
Brick
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
Etc.
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
