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

by Brian Rinaldi on December 10, 2013

Lots of great stuff this week. Despite its age, SVG appears to be hot – this week’s update features three great posts all focused on SVG (and there’s been many more in recent weeks). Also, check out an extremely comprehensive overview of PhoneGap mapping solutions and a great look at using CSS shapes and CSS Regions together. Plus, lots of new, interesting libraries. Enjoy.

Tutorials

Ryan Morr explores what makes Null and Undefined unusual data types in JavaScript.
Exploring the Abyss of Null and Undefined in JavaScript

The this scope in JavaScript can be confusing, but Nicolas Bevacqua details how it works and how to work with it.
Demystifying this in JavaScript

Sara Soueidan shows how combining CSS Regions with CSS Shapes creates a better, print-like reading experience.
Using CSS Regions With CSS Shapes For A Better Reading Experience

A thought-provoking post by David Walsh on the 5 “best practice” rules you should stop using.
5 Best Practice Mentalities to Get Over

Brian Suda discusses how to get started using SVG in HTML and how to use a technique from Vox Media to animate them.
Animating Vectors with SVG

Mike Fortress shows how Sprout used animated SVGs with custom easing and timing to significantly reduce page size.
Animated SVGs: Custom easing and timing

Create tabs by using a repeated shape template in SVG from Chris Coyier.
SVG Tabs (Using an SVG Shape as Template)

In part 3 of his series on JavaScript Kinetic Scrolling, Ariya Hidayat shows how to build the “snap to grid” feature.
JavaScript Kinetic Scrolling: Part 3

A look at the different behavior of input.select() across different browsers by Louis Lazaris.
input.select() — What’s the Correct Behaviour?

A great post by Tero Parviainen on building your own AngularJS from the ground up starting with scopes and digest.
Make Your Own AngularJS, Part 1: Scopes And Digest

Juriy Zaytsev shows a nice variety of canvas drawing techniques including a number of different types of strokes.
Exploring canvas drawing techniques

Tyler Sticka walks through how to build a Chrome Extension by showing how he built the Colorpeek extension.
Colorpeek, Part 2: Building Your First Chrome Extension

Libraries and Frameworks

Andrew Burgess takes a closer look at Node’s Event Module and it’s EventEmitter class.
Using Node’s Event Module

Toby Ho walks through how to use Esprima to detect accidentally leaked global variables in a program.
Fun with Esprima and Static Analysis

Mobile

Rob Lauer compares 5 different mapping solutions for PhoneGap apps for ease of implementation, functionality and performance.
Mobile-Friendly Mapping for PhoneGap Apps

Build a quiz manager mobile application using jQuery Mobile by Raymond Camden.
Building a Quiz Manager for jQuery Mobile

New and Updated Libraries and Frameworks

Infect.js is a simple, dependency-free JavaScript dependency injection framework supporting RequireJS, AMD and Node.
infect.js

phantomas is a PhantomJS-based web performance metrics collector and monitoring tool.
PhantomJS based, modular web performance metrics generator

Zoomerang let’s you add the ability to zoom on almost any element on your page.
zoomerang

OriDomi by Dan Motzenbecker lets you fold DOM elements like paper.
OriDomi – origami for the web

LargeLocalStorage is a large capacity, up to several GB when authorized by the user, key-value store in the browser.
LargeLocalStorage

TOMODOkorz lets you make cross-origin requests to any domain and can remove cross-origin restrictions from your site.
TOMODOkorz

TinyCore.js is a tiny JavaScript modular architecture library.
tinycore

generator-threejs is a Yeoman generator for three.js experiments.
generator-threejs

Etc.

Paul Irish shows off new tools in Chrome DevTools for Mobile including screencast, port forwarding and emulation.
Chrome DevTools for Mobile: Screencast and Emulation

HTML5 UP! by AJ offers a number of free, responsive and customizable site templates.
HTML5 UP! Responsive HTML5 and CSS3 Site Templates

Tom Ashworth shares some ideas of ways to improve your JavaScript skills.
JavaScript: Taking Off the Training Wheels

If you’ve read his articles, you know that Nicolas Bevacqua writes great stuff. His first book on JavaScript Application Design – A Build First is now available. Get it.
Get Between the Covers of Build First

Andrew Trice shows how you can use a combination of PhotoShop and Edge Animate to create a cool parallax effect on mobile devices.
Photorealistic 3D Parallax Effects in HTML or Adobe DPS with Adobe Photoshop and Adobe Edge Animate

Brian Rinaldi

Brian Rinaldi is the founder of Flippin' Awesome. Brian works as the Developer Content Manager at Telerik (though this site is not affiliated with his employer) focused on ensuring that the Developer Relations team creates top notch content for the web development community. Previously, Brian focused on publishing HTML, CSS and JavaScript developer content for the Adobe Developer Connection at Adobe.

Brian has published in a variety of technical publications over the years, has presented at numerous conferences and events and has served as a technical editor on a number of books.

You can read Brian's blog archive with 9+ years of content at remotesynthesis.com (he still posts, infrequently). You can find a full list of Brian's past publications and presentations. Follow Brian on Twitter @remotesynth.