Issue #27  (try/catch/throw, GitHub/CLI, Mobile, CSS)01/23/14

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

You can use the try-catch as a way to handle exceptions, or errors, in JavaScript. It looks like this:
try {
  // code that may cause an error
} catch (error) {
  // do this when the error occurs

If an error occurs in the ‘try’ section, code execution immediately exits and continues in ‘catch’, which receives an object that has info about the error. This prevents errors from being displayed by the browser.

You can also use the the optional finally clause:
try {
  // code that may cause an error
} catch (error) {
  // do this when the error occurs
}  finally {
  // this will always run, no matter what

‘finally’ isn’t always useful because it always runs, no matter what — whether there’s an error or not. So it should be used with care, especially if you’re returning values in any of the code (e.g. a return statement in ‘finally’ will cause a return statement in ‘try’ to be ignored, even with no error).

You also have the option to ‘throw’ errors using the throw operator. This lets you ‘throw’ a custom error message whenever you want. For example, if a function requires an argument to be an array, you can check for this and ‘throw’ a custom error to help you debug:
function needsArray (arr) {
  if (!(arr instanceof Array)) {
    throw new Error("needsArray(): Object not an array.");
  // remainder of function here...

In this case, the error thrown is creating a new instance of an existing error type, but you can throw any type of value.

Nicholas Zakas, in his book Professional JavaScript for Web Developers, explains nicely when to use try-catch and throw:

“You should only catch errors if you know exactly what to do next. The purpose of catching an error is to prevent the browser from responding in its default manner; the purpose of throwing an error is to provide information about why an error occurred.”

More info:
Now on to this week's tools!

Git/GitHub/Command Line Tools

"Search your starred GitHub repos from the shell.'

"Bootstrap for your terminal. A quick way to spruce up OSX terminal. It cuts out the fluff, adds in timesaving features, and provides a solid foundation for customizing your terminal style."

A plugin for (for OSX 10.7+) that lets you open or close the terminal with a custom hot-key.

Avatars for GitHub
A simple Chrome extension to display user avatars in your GitHub news feed.
"Just replace with and skadoosh, you're loading raw files from your GitHub repo and they're served with appropriate content types. Render HTML, apply CSS, execute JavaScript."

"Git commands for grunt."

Stargazers forks
"Enter a GitHub repo to see the most popular forks. This might help to find maintained alternatives of an abandoned repo."

This looks interesting: "Analytics for GitHub". 

A command-line utility to search and replace in JavaScript, "but unlike programs such as grep or sed, it searches the structure behind your code (the abstract syntax tree), rather than simply the text you've written."

And into the realm of the ridiculous: Webcam for your terminal.


Mobile Tools

"A free framework that lets you style your native iOS views with stylesheets." Also has a companion toolkit called Freestyle that helps you centralize and maintain your CSS.

Instant publishing & A/B testing on mobile apps using a visual drag-and-drop editor, for iOS and Android.

"A tiny library for interactive swiping and reordering of elements in lists on touch screens. No dependencies."

"Offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps. Built with Sass and optimized for AngularJS."

"Backend as a service (BaaS), which links your [mobile] applications to backend cloud storage while also providing user management, push notifications, integration with social networking services, and more."

A JavaScript library for multi-touch gestures. "Supports Tap, DoubleTap, Swipe, Drag, Pinch, and Rotate gestures. Each gesture triggers useful events and eventData."


"Listen for CSS selector rule matches at document or element level."

"Not all devices support unicode characters equally – either directly or as @font-face fallbacks. I was hoping that someone had created a site that showed which were the safest to use."

"A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on."

"A small (less than 2 kb) CSS framework."

Unused CSS
"Explore the pages of your site automatically, find the unused CSS selectors and create new clean CSS files you can download."

"A nicer color palette for the web." Changes the browser default colors on web pages for links, text, etc.

Border-radius generator
From MDN, this is probably the best of the border-radius generators because it lets you define different radii for vertical and horizontal on a single corner (a somewhat unknown feature in the spec).

Loaders Kit
"Single Element pure CSS Spinners & Loaders."


A Tweet For Thought

A sentiment many can probably relate to, from Josh Helfferich.


Suggest Your Tool / 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...

You might find this HTML Email signature generator useful. You can paste the rich text directly, or grab the email-friendly HTML. It even adds an editable legal disclaimer.

Thanks to all for subscribing and reading!

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

Email Marketing Powered by MailChimp