Issue #55  (Null Comparisons, CSS/HTML, Debugging, Cloud)08/07/14

In Maintainable JavaScript, Nicholas Zakas recommends avoiding null comparisons. That is, testing the value of a variable against null. This type of test can be used in a few cases, but generally should be avoided as it doesn't give you enough information about the value to let you proceed further.

Instead of testing against null, here are his recommendations for testing for the existence of different types of values in JavaScript:
  • Use typeof to detect primitive values (strings, numbers, Boolean, and undefined)
  • Use instanceof to detect specific object types (dates, RegExp, errors, etc.)
  • Use typeof to detect functions (but not in IE8)
  • Use ES5's isArray() or a custom isArray() method to detect arrays.
  • Use the in operator to detect properties
All of the above could be expanded on, and he does so nicely in Chapter 8 of his book, so check it out if you haven't already.

Now on to this week's tools!
Support Web Tools Weekly:   384 pages of CSS for $7

CSS and HTML Tools

"Photoshop script that converts layer effects to CSS string in one click. It supports shadows, glows, gradient and color overlay, stroke, text-shadow and text-color and other."

CSS Analyser
"Analyse your CSS stylesheet to get a variety of statistics (number of rules, selectors, property definitions, media queries, size)."

"A simple, self-contained, command-line program able to convert markdown files into self-contained HTML pages, automatically embedding all the needed fonts, stylesheets and images."

Web Code Tools
"A web code generator for everything." Includes CSS3, HTML5, Microdata, Meta Tags, Facebook Open Graph, and Twitter Cards.

A 12-column grid made with pure CSS. Works on IE 9+, Chrome, Firefox, Opera, and Safari, and has been thoroughly tested on iOS, Android, and Blackberry.

"DynCSS parses your CSS for -dyn-(attribute) rules. These rules are JavaScript expressions evaluated on browser's events like scroll and resize. The result is applied to the CSS attribute you have specified as suffix."

"The responsive slider with advanced CSS3 transitions."

CSS only custom-styled select
A JS Bin demo with a nice looking solution for CSS-styled select element menus.

Converts JSON data to HTML tables, with the option to have a raw HTML table or a Bootstrap-styled one.

CSS Colorguard
"CSS Colorguard helps you maintain the color set that you want, and warns you when colors you've added are too similar to ones that already exist."

Initial Grid
"A simple but powerful 12 column responsive grid system written in pure CSS."


Testing and Debugging Tools

"A file format that allows threaded code reviews to exist inline with the unified diffs they address (any legal diffscuss file is also a legal unified diff)."

A Chrome extension that "offers a new way to interact with the DevTools. For the first time ever, you can now create keyboard shortcuts to DOM elements."

Check My Links
A Chrome extension to quickly check a web page for valid/invalid links.

PageQuery for Firefox
"A simple Mozilla firefox extension to Execute a jQuery/JavaScript snippet on a web page on demand and see the response."

Magic number detection for JavaScript. It sniffs out unnamed numerical constants in your code.

Traceur is a compiler that takes ES6 (including classes, generators, destructuring and much more) and compiles it down to regular JavaScript (ES5) that runs in your browser.

"An open source load testing tool. Define user behaviour with Python code, and swarm your system with millions of simultaneous users."

Library Detector For Chrome
Chrome extension that discovers which Javascript libraries are being utilized on web pages you visit and displays their icons in the address bar. Supports 70+ popular libraries.

"Painless JavaScript unit testing." Built on top of the Jasmine framework.

jQuery triggerTracker
"A tool for tracking jQuery events. It is a single JavaScript file that, when loaded, provides output to the browser's console related to jQuery event triggering and event handlers."

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

Documents, Content, Cloud Storage, etc.

"Enables the sharing of large datasets, the goal being a collaboration flow similar to what git offers for source code."

"An open-source PDF rendering engine."

"Painless collaboration for powerpoint."

"Replaces proprietary sync and cloud services with something open, trustworthy and decentralized. Your data is your data alone and you deserve to choose where it is stored, if it is shared with some third party and how it's transmitted over the Internet."

"A sync program similar to DropBox, except it does not require a monthly fee. Instead, you set up shares between two or more computers and the sharing happens amongst them directly."


A Tweet for Thought

Livia Labate reminds us that cross-browser compatibility isn't as black and white as it seems.


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...

If you're both a musician and a programmer, you might want to try out beeplay.js, which let's you write a song in JavaScript.

Thanks to all for subscribing and reading!

Keep tooling,
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp