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

by Brian Rinaldi on November 4, 2013

The modern web is always changing, and this article is more than two years old.

A lot of great tutorials and a ton of new libraries this week. Check out how to use pixi.js to create an infinite scroller game, Bootstrap 3 as a workflow tool, ExpressWorks to learn Node and Express, and npm-onupdate to keep your libraries up to date. There are a couple of great “opinion” type pieces too (something I think many people are often scared to post). Check out Christian Helmann talking about bad JavaScript practices, and Kirupa Chinnathambi explaining why static comps are no longer enough.

Tutorials

Dave DeHaan explains how he and his team created a dynamic, animated hero image using HTML canvas.
Creating an Animated Hero Image with Canvas

Christian Heilmann discusses some bad JavaScript practices that are unfortunately still being taught.
Perpetuating terrible JavaScript practices

Brian Gonzalez shows how to create a page transition similar to Medium’s using HTML, CSS and JavaScript.
Medium-Style Page Transition

Parker Bennett demonstrates how he created a layout with complex shapes and image backgrounds using CSS.
Well Rounded: Compound Shapes in CSS

Jeff Friesen augments JavaScript core objects, a practice some reject but he argues is worthwhile if done carefully.
Augmenting JavaScript Core Objects

Pedro Botelho shares an experiment for multi-item checkbox selection using a click and hold.
Multi-Item Selection

Paul Kinlan explains several methods for creating fullscreen mobile experiences in the browser.
Building an amazing fullscreen mobile experience

A good reference of when to use (and when not to use) certain CSS measurements.
Which CSS Measurements To Use When

Try this browser-based musical keyboard and then learn how it was built using Web Audio.
Musical Keyboard – JS Dynamic Audio Synth

Jens Loeffler explains important components required for online video experiences and maps them to HTML5 capabilities.
HTML5 Video Guide – All You Need to Know for 2014

Libraries and Frameworks

How to start creating a parallax scrolling endless runner game using HTML and JavaScript with Pixi.js by Chris Caleb.
Building a Parallax Scrolling Game with Pixi.js

See how Bootstrap 3 includes tools to help automate your web development workflow and speed up prototype development.
Using Bootstrap 3 as a Web Development Workflow Tool

Leo Horie gives his perspective on specific things that he thinks aren’t great in AngularJS.
Things that suck in AngularJS

Gabriel Cirtea shares an introduction to Sails.js, a JavaScript MVC framework resembling Ruby on Rails.
Introduction to Sails.js

Mike Cunsolo walks through how to get started with Grunt for common web developer tasks.
Get Up And Running With Grunt

Raymond Camden shares a demo of using the new Snap.svg library to create an interactive map of census data.
Snap.svg demo – Census Data

Andy Shora explains what you should be testing and when you should be writing tests for AngularJS.
Unit Testing Best Practices in AngularJS

New and Updated Libraries and Frameworks

Tiny Test JS is a port of the ColdFusion unit testing framework to JavaScript for testing modules by Ben Nadel.
Tiny Test JS – An Exploration Of Unit Testing In JavaScript

ExpressWorks by Azat Mardanov is a project available on npm that’ll walk you through the basics of using Node and Express.
ExpressWorks

Cloak is a library for multiplayer HTML5 games that handles client/server messaging, room/lobby management and more.
Building Multiplayer HTML5 Games with Cloak

formatter.js is a JavaScript library that helps format user input in web forms to match specified patterns.
formatter.js

Browser-sync watches files and informs connected browsers to reload (inject) the new CSS and works on all browsers.
Cross Browser CSS Injection

Alex MacCaw created a jQuery library to simplify animating transitions between DOM states.
Animating DOM transitions

Christophe Coenraets shares an example of Keypoint, a PhoneGap-based HTML slide decks micro-framework he built.
Keypoint: PhoneGap-Based HTML Slide Decks

PhysicsJS is a modular and extendable physics engine for JavaScript.
PhysicsJS – A modular, extendable, and easy-to-use physics engine for javascript

A new npm service that notifies you when specific Node.js packages are updates in the npm registry from Piotr Walczyszyn.
Stay up-to-date with Node.js packages using npm-onupdate service

Brackets Sprint 33 includes creating new rules in CSS Quick Edit, visual CSS timing function editor, and image preview from project tree.
Brackets Sprint 33 Build

Etc.

Web design has changed so that static comps no longer provide enough information for the modern web says Kirupa Chinnathambi.
Static Comps Are Simply Not Enough

A new extension that adds Apache config file support for Brackets from Terrence Ryan.
Apache Config file support for Brackets

Raymond Camden created a new Brackets extension that lints HTML.
HTMLHint extension for Brackets