Issue #63  (null vs. undefined, JS Utils, Sass, Testing/Debugging)


(Skip to the tools section below)


In JavaScript, you are most certainly familiar with the values null and undefined. Let's briefly consider the facts and quirks of these two values to demonstrate the differences between them. First here is a summary of facts on null:
  • null is a language keyword used to indicate the absence of a value, or empty value.
  • null can be used to indicate "no value" for numbers, strings, and objects.
  • Oddly, using typeof on null returns the string "object". According to David Flanagan, this is supposed to indicate that null is a special object value indicating "no object". However, MDN's reference says this is a bug in ECMAScript.
The undefined value, on the other hand, can be described as follows:
  • undefined is not a language keyword but a predefined global variable. Thus:
undefined === window.undefined; // true
  • A variable that has not been initialized has a value of undefined.
  • An object property or array element that doesn't exist has a value of undefined.
  • A function that has no return value will always return undefined.
  • Function parameters for which no argument is supplied will equal undefined.
  • In ES3 undefined can be set to a new value, but since ES5 this is no longer possible.
  • Using typeof on undefined returns "undefined".
When comparing null and undefined, you'll notice the following:
 
null == undefined; // true
null === undefined; // false

As you can see, in order to differentiate between them, you have to use the strict equality operator (triple-equals), which is usually recommended for all comparisons anyhow.

Generally, undefined is considered an unexpected value, similar to an error, whereas null is usually expected. So if you have to assign the absence of value to something, you're almost always better off using null rather than undefined.
Now on to this week's tools!
 
Support Web Tools Weekly:   384 pages of CSS for $7
 

JavaScript Utilities and Mini Libraries


Molten Leading
"Automatically adjust line-height based on element width for optimal readability." No dependencies and works back to IE6.

JSON Web Token
"A compact URL-safe means of representing claims to be transferred between two parties."

ZipLocate
"An API for zip code geolocation."

DataCollection.js
"Inspired by modern Object Relational Managers, DataCollection.js is a JavaScript library for storage, filtration, manipulation and accession of large datasets."

hello.js
"A client-side JavaScript SDK for authenticating with OAuth2 (and OAuth1 with a oauth proxy) web services and querying their REST API's."

Polyfill service
"Selectively bundles browser polyfills based on the User-Agent header supplied in a request, with the intention of allowing JavaScript and CSS developers to use modern standards in legacy user agents."

postscribe
"Asynchronously write JavaScript, even with document.write."

Pikabu
"A speedy, flexible framework for off-canvas flyout panels."

ment.io
"@mentions and macros widget based on AngularJS, but with no dependencies on jQuery."

timing.js
"A small set of helpers for working with the Navigation Timing API to identify where your application is spending its time. Useful as a standalone script, DevTools Snippet or bookmarklet."

overmind.js
"Easy module isolation and lazy loading for Angular apps."


 
Support Web Tools Weekly:   384 pages of CSS for $7
 

Sass and Preprocessor Tools


Sassy-Gridlover
"Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm."

Flint
"A highly advanced Sass grid framework designed for rapid responsive development."

Tipsy.sass
A tooltip mixin built in Sass, supported in IE9+.

Stylecow
"The main purpose of stylecow is to bring more CSS support to all browsers. Stylecow converts your code to be more compatible with all browsers adding vendor prefixes, fixing issues, generating polyfills, etc."

kouto swiss
"A complete CSS framework for Stylus." Kind of like the Compass and Bourbon of Stylus.

Sache
"Discover Sass and Compass extensions. Find the perfect tool for your next Sass or Compass project."

lemanz
Dennis Gaebel's starting point for for all personal/work-related projects using Sass and Compass. Also includes some JS utilities and libraries.

UtilityBelt
"A set of SCSS mixins and silent classes for starting any new project."

Munee
"A PHP5.3 library to easily on-the-fly compile LESS, SCSS, or CoffeeScript, resize/manipulate images on-the-fly, minify CSS and JS, and cache assets locally and remotely for lightening fast requests. "

 

Testing and Debugging Tools


fixmyjs
"Meant to automatically fix your lint errors in a non-destructive way."

gremlins.js
"A monkey testing library written in JavaScript, for Node.js and the browser. Use it to check the robustness of web applications by unleashing a horde of undisciplined gremlins."

ReviewNinja
"A code review tool for GitHub that lets you merge pull requests with confidence."

jstinytest
A quick way to unit test a JavaScript function/object in a web-page without getting bogged down in frameworks.

exceptions.js
"The library that makes JavaScript errors useful. Include stacktraces, screenshots, DOM dumps, browser information, etc. when users hit JavaScript errors."

xip.io
"Wildcard DNS for any IP address. You can use these domains to access virtual hosts on your development web server from devices on your local network, like iPads, iPhones, and other computers."

Custom JavaScript for websites
Chrome extension "to inject custom JavaScript in any website. Your scripts are kept in the local storage and applied across domain URLs."


 
Support Web Tools Weekly:   384 pages of CSS for $7
 

A Tweet for Thought

Anyone that's tried to style form elements with CSS will agree with this tweet by David Kaneda.

 

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.

 

Before I Go...

Here's an interesting RSS-based service called rssheap. It's a web-based reader for software developers that allows you to subscribe to tags like "ruby" or "java" and the service finds applicable articles for you to read.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
Copyright © 2013 Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp