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

| ,


This week’s update is brought to you by the words “chaos” and “over-scheduling.” Yes, that’s what I have done to myself. Nonetheless, there’s lots of great stuff to read. My highlights would include Raymond Camden’s article on how to convert your site to static without sacrificing functionality and Hyperglot which is a tool for building languages or DSL’s.


How to convert your dynamic site to static but keep important dynamic elements like comments, calendars and more by Raymond Camden.
Moving to Static and Keeping Your Toys

Steven Bradley explains the inner workings of z-index and understanding the stacking contexts.
What You May Not Know About the Z-Index Property

Check out some creative ideas for progress buttons by Mary Lou built with HTML and CSS.
Progress Button Styles

Frederik Dohr walks through converting a simple widget into a modular JavaScript component.
Developing Modular JavaScript Components

Keith Peters starts an interesting new video series on coding math covering math concepts with examples using JavaScript.
Announcing Coding Math Video Series

Learn how to use the User Timing API to accurately measure the performance of JavaScript code by Aurelio De Rosa.
Discovering the User Timing API

Darius Kazemi explains what uniforms are, how to use them in WebGL and how to count when you are using too many.
Counting Uniforms in WebGL

Doug Avery shows how to create a film grain effect for images in pure CSS.
Creating a Film Grain Effect with CSS3

A good overview of JavaScript objects for beginner JavaScript developers by Kirupa Chinnathambi.
A Deeper Look at Objects in JavaScript

Chris Coyier shows how to make the menu icon the actual menu, just smaller.
Line Menu Icon… That Is A Menu

Libraries and Frameworks

What are the most exciting features in the new Foundation 5? Zing Design shares their top 5 and why they’re important.
5 Most Exciting Features of Foundation 5

Krasimir Tsonev explains what he didn’t like about LESS and Sass and why he wrote his own preprocessor, AbsurdJS.
AbsurdJS or Why I Wrote My Own CSS Preprocessor

Ben Nadel explains the relatively recent finish() method in jQuery animations versus classic stop() method.
$.stop() vs. $.finish() In jQuery Animations

Chris Coyier walks through using Grunt for design tasks like concatenating/compressing, optimizing images and more.
Grunt for People Who Think Things Like Grunt are Weird and Hard

Mike Pennisi walks through how to properly write unit tests using AMD modules in RequireJS.
Effective Unit Testing with AMD

Ariya Hidayat shows how combining Mocha with Istanbul and Karma you can track code coverage of the application code when running unit tests.
Code Coverage of Mocha Tests using Istanbul and Karma

Addy Osmani shows how to build applications using MongoDB, Express, Angular and Node (aka MEAN) and Yeoman.
Full-Stack JavaScript With MEAN And Yeoman


Jake Archibald explains that the 300 millisecond delay on Android has been removed as of Chrome 32.
300ms tap delay, gone away

New and Updated Libraries and Frameworks

Voix JS is a JavaScript library for adding voice commands to sites, apps or games. Currently Chrome only.
Voix JS Component

Knwl.js can search text for dates, times, emails, phone numbers, links and emotion, or even check if it’s spam.

Ever thought about writing your own programming language or DSL? Hyperglot, built on Node, is designed for just that.
Hyperglot – A Language Experimentation Platform

Feathers helps create RESTful API’s with real-time events using Express and
Feathers – Let your applications fly!

LMD (Lazy Module Declaration) is a JavaScript module assembler for building web applications.
LMD: Lazy Module Declaration


Domain Swap is a Chrome Extension that lets you change the domain of the active tab while keeping the path the same.
Domain Swap: A Google Chrome Extension

I discuss Google’s recent Chrome Apps announcements including Mac support and upcoming iOS/Android support with Cordova.
Google Announces Chrome Apps Improved Offline Capabilities & Mac Support

Liveweave is another HTML, CSS and JavaScript playground with code hinting for all three plus jQuery.
Liveweave – HTML5, CSS3 & JavaScript playground for web designers & developers

Part one of an overview of mobile remote debugging tools covering iOS and Chrome remote debugging by Raymond Camden.
An Overview of Mobile Debugging Techniques – Part One

Canalyzer, a new Brackets extension by Raymond Camden, attempts to parse your project directory for possible compatibility issues.
New Brackets Extension – Canalyzer!

Leave a Comment