|
|
|
|
Issue #67 (Method lookups, GitHub/CLI, JS Libs, Uncats)10/30/14
Because of the problems inherent in using JavaScript's switch statement, many developers and reference guides will recommend avoiding switch constructs and instead using something called a method lookup (also referred to as a lookup table or even dispatch table). Let's convert a switch statement to a method lookup, so we can see how this is done. Here's our switch:
function doSomething(condition) {
switch (condition) {
case 'one':
return 'one';
break;
case 'two':
return 'two';
break;
case 'three':
return 'three';
break;
default:
return 'default';
break;
}
}
|
(JS Bin example)
All of this is inside a doSomething() function, with a condition passed in. The possible values are 'cased', to define the return value. This is cleaner than a messy if-else construct, but can we clean it up even more?
Here's basically the same thing in the form of a method lookup:
function doSomething (condition) {
var stuff = {
'one': function () {
return 'one';
},
'two': function () {
return 'two';
},
'three': function () {
return 'three';
}
};
if (typeof stuff[condition] !== 'function') {
return 'default';
}
return stuff[condition]();
}
|
(JS Bin example)
In the demo, you can see four logs in the console, one for each valid condition and then another one to demonstrate the default condition when the argument doesn't match one of the methods.
You can see why people like this technique. It's clean, elegant, and seems a little more sophisticated without being more complex. I've only scratched the surface on this, so here are a few good resources to read up more on this subject:
Now on to this week's tools!
Git, GitHub, and Command Line Tools
ZenHub
"ZenHub turns GitHub Issues into real time draggable cards on shared Boards with customizable pipelines – right within the GitHub interface."
sudolikeaboss
"Aims to make your life as a dev, ops, or just a random person who likes to ssh and sudo into boxes much, much easier by allowing you to access your 1password passwords on the terminal."
jss
"JSON processing command line tool based on JSONSelect (CSS-like selectors for JSON)."
GitHub Linker
A Google Chrome Extension that links NPM, bower, Composer and Duo dependencies to their GitHub repository page.
Diffmatic
"Get daily digests of GitHub activity in your inbox. Every day, Diffmatic will send you an email digest [that] lists what each team member has done in the past day."
tpr
"Test github pull requests locally."
mdp
"A command-line based markdown presentation tool."
Gooey
"Turn (almost) any Python command line program into a full GUI application with one line."
github-pull-filter
"Filter specific files in a pull request by specifying them in the description via RegEx."
pup
"A command line tool for processing HTML. It reads from stdin, prints to stdout, and allows the user to filter parts of the page using CSS selectors."
husky
"Prevents bad commit or push (git hooks, pre-commit, pre-push and all that stuff...)"
| Support Web Tools Weekly: 384 pages of CSS for $7 |
JavaScript Libraries and Frameworks
MelchiorJS
"The most javascripty way to configure dependencies. The first module loader with Chainable Module Definition API."
Mocaroni
"Rapid Web API prototyping and collaboration for developers."
Rekapi
"A library for making <canvas> and DOM animations with JavaScript, as well as CSS @keyframe animations for modern browsers."
Apper
"Plug and play, restful, real-time application framework for single page apps."
PathFinding.js
"A comprehensive path-finding library for grid based games."
tint2
A library to build native desktop applications with JavaScript.
BottleJS
"A tiny yet powerful dependency injection container. It features lazy loading, middleware hooks, decorators, and a clean API."
Angular-js.in
"A curated list of angular directives."
Hamlet
"Never touch the DOM by hand again – Hamlet does a great job of transparently keeping your model code in sync with the DOM."
Highcharts
"Interactive JavaScript charts for your web pages."
angular-data
"The model layer Angular is missing. It consists of a convenient in-memory cache for managing your data, and several adapters for communicating with various persistence layers."
The Uncategorizables
Frontbin
"Pastebin for the Front-End Developer." Has options to beautify HTML/CSS/JS and encode/decode HTML.
API Logo
"An API for creating logos and favicons on demand."
EASY2REC
High quality videos, made easy. Produce videos by doing it yourself right at your desktop without specialized equipment."
WordPress Plugin Boilerplate
"A standardized, organized, object-oriented foundation for building high-quality WordPress Plugins."
Automately
"We’ve created a service that will give you the power to connect your apps to any website you want using JavaScript and the power of Automately."
OnlineDomainTools
"A set of free ... specialized tools for network administrators, webmasters, web application developers, domain owners as well as tools useful for all Internet users."
ForerunnerDB
"The only browser-based database with a simple, rich JSON-based query language."
Monitorbook
"Easily track anything on the web. Intuitive interface and no code necessary."
Liquibase
"Source control for your database."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
A Tweet for Thought
Chrome Dev Relations guy Paul Lewis posted a useful flowchart showing what to do if you think you've found a browser bug.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
If you haven't checked it out yet, the Open Web Platform Daily Digest by Šime Vidas is a daily must-read for keeping up with the latest news related to web platform technologies.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
