|
|
|
|
Issue #50 (switch fall-through, CSS/HTML, JS Utils, Documents)07/03/14
You might be aware that the coding style for a JavaScript switch statement is a topic of varying opinions. One of the debated topics has to do with something called "falling through". This is in reference to the case statements that are used in a switch construct, as shown here:
switch(example) {
case "one":
case "two":
// do something...
break;
case "three":
// do something...
default:
// do something...
}
|
Let's assume the only cases in that switch that will have executing code will be where it says "do something..." Notice a couple of things in the code:
- There is no code executed for case "one", and there is no "break" for case "one".
- There is no "break" for case "three".
Personally, I can't stand code like that, so I will follow Crockford's and JSLint's suggestions to include break statements for each case that's not an obvious fall-through. But some people enjoy this kind of thing and they'll actually use it as a feature, rather than viewing it as a 'bad part' of JavaScript.
To understand what the lack of break statements in this example does, check out this JS Bin demo. Notice what happens when you change the variable to one of four options:
- "one" - The code for "two" executes, because "one" falls through into "two";
- "two" - only "two" executes, which is the same result as "one";
- "three" - both "three" and "default" execute, because "three" falls through into "default".
- "four" (or anything else) - Only the "default" executes.
In Maintainable JavaScript, Nicholas Zakas recommends that if you allow fall-throughs like this, that you should comment your code to indicate it. Also, because the fall-through in "one" is obvious (i.e. there's no code to execute), you don't have to comment that type of fall-through.
Now on to this week's tools!
CSS and HTML Tools
Tables Generator
This is a really nice generator for different types of tables. HTML tables, Markdown tables, plain text tables, and even Wiki tables. Lots of edit and import/export features too.
Bootstrap Carnival
Showcasing 1000+ Bootstrap themes under many different categories. Really cool feature is how you can test each theme in three different window sizes, for responsiveness.
Type Sample
A Chrome extension or bookmarklet for identifying and sampling web fonts.
Bounce.js
"Lets you create tasty CSS3 powered animations in no time."
StyleStats
"A Node.js library to collect CSS statistics."
Project Parfait
A Beta service from Adobe that "expedites PSD comp-to-code workflows", letting you extract color, gradient, and font info from a PSD, copy text and CSS, get accurate measurements between elements, and save web-optimized images.
HalfStyle
"A set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually."
AniJS
"Declarative handling library for CSS animations."
CSS Hexagon, Please
Lets you choose color, size, background image, shadow, and border.
Snipcart
"Effortless shopping cart" that lets you use simple HTML to "turn any existing website into an extensive shopping cart platform."
Web Components Chrome Extension
Lets you detect if a page is using Web Components, showing you an icon in the address bar when it is.
JavaScript Utilities and Mini Libraries
PourOver
"For simple, fast filtering and sorting of large collections ... in the browser. It allows you to build data-exploration apps and archives that run at 60fps, that don’t have to to wait for a database call to render query results."
Native Promise Only
"A polyfill for native ES6 Promises as close as possible (no extensions) to the strict spec definitions."
VanillaMasker
Hard to explain what this does, but it "masks" input elements. That is, data entered into the inputs is pre-formatted and adjusts accordingly (using decimals, commas, currency symbols, etc.)
randomColor
A random color generator script that "produces bright colors with a reasonably high saturation. This makes randomColor particularly useful for data visualizations and generative art."
webwork.js
"Execute Web Workers without external files."
Intro.js
A script to generate a website/app feature tour. I like that this one has keyboard navigation and it seems to run fast and smoothly.
Sidescroller
A sidescrolling image gallery script that's an extension of Filament Group's "overthrow" script, which is a script for improving "overflow: auto" behaviour in responsive designs.
Zoomerang.js
"A drop-in library that allows your users to zoom in on (almost) any element on your existing page."
Documents, Content, Files, etc.
MacDown
An open source Markdown editor for OSX.
Odyssey.js
"A simple way for journalists, designers, and creators to weave interactive stories."
Infinit
A Dropbox-like native OS and Windows app that's free and unlimited. No server, it's peer-to-peer, and you can send to existing users or create links to share anywhere.
jsDelivr
A one-stop CDN with hosted links for common libraries, frameworks, fonts, etc.
Hiro
A collaborative note-taking app in alpha that lets you publish to Dropbox, Google Drive, Evernote, and more.
Bitcasa
Cloud storage and backups with end-to-end encryption, accessible from any device, unlimited space and lets you open any file from anywhere, including HD streaming.
A Tweet for Thought
An old Tweet from Scott Hanselman in which he explains why arguing on Twitter is just plain stupid.
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...
Take a look at Two Factor Auth List, a site that lists a number of large websites (including apps, banks, social networks, and more) telling you whether they support two-factor authentication. They also give you a one-click option to encourage any site, via Twitter, to support 2-factor auth.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
