|
|
|
|
Issue #35 (continue, CSS/HTML, GitHub, JS Libs)03/20/14
The break statement is probably pretty familiar to most of you. It lets you "break" out of a loop at a specified point, depending on the existence of a condition.
But maybe you haven't had much exposure to the related continue statement and its optional label parameter. Look at the following simple example:
var i = 1,
j;
for (j = 1; j <= 5; j += 1) {
if (j === 2) {
continue;
}
i += 1;
}
console.log(j); // 6
console.log(i); // 5
|
(JS Bin)
Here we're looping through and checking the value of the j variable. At the end of each loop iteration, we increment the i variable. But what does that conditional with the continue statement do?
Well, continue tells the code not only to break out of the loop at that point, but also to continue the next iteration of the loop but without executing the rest of the code in the loop. So in this example, on iteration #2 (when j is equal to "2"), the loop doesn't get to the point where i is incremented. This causes i and j to have different values when the loop is done all its iterations.
Now here's an example with the optional label parameter used with continue:
var num = 0,
i, j;
outside:
for (i = 0; i < 10; i += 1) {
for (j = 0; j < 10; j += 1) {
if (i === 5 && j === 5) {
continue outside;
}
num += 1;
}
}
console.log(num); // 95
|
(JS Fiddle - because JS Bin doesn't seem to recognize labels..?)
Notice the outside label inside the conditional. Also notice the outside label identifying the outer loop. So this label in the conditional tells the script to break out of the inner for loop, which means the num variable won't increment when that condition is met. It then "continues" with the outer for loop.
Without the continue statement, this code would output a value of "100" for num (10*10), but because the if condition breaks out of the inside loop when j gets to "5", the inside loop will miss 5 iterations, thus num ends up as "95".
It's worth fiddling around with labels because it can get confusing. Nicholas Zakas recommends: "Always use descriptive labels and try not to nest more than a few loops", in order to avoid confusion. (Professional JavaScript for Web Developers, 2nd Edition)
More info:
Now on to this week's tools!
CSS and HTML Tools
CSS Hero
"The definitive WordPress plugin to easily customize every property of your themes with an easy and intuitive point and click interface."
Yamm 3
"Yet another megamenu for Bootstrap 3 from Twitter. Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 3."
CoffeeKup
"A templating engine for node.js and browsers that lets you to write your HTML templates in 100% pure CoffeeScript."
StyleStats
A Node.js library to collect CSS statistics. Via command line it will spit out a bunch of stats for the stylesheet you input (number of selectors, declaration blocks, use of !important, etc).
CSS Shake
A library of animation classes to "shake" DOM elements. You know, for when you want your page elements to tremble in fear. :)
Bulletproof HTML Email Components
Some cross-client components you can add to your custom HTML emails, including buttons, progress bars, and even a way to embed a Google Maps image.
Slider.css
A presentation (slide deck) library in CSS, no JavaScript.
TypeWonder
"Helps you to test web fonts on any web site on the fly. Enter the site url and preview instantly the fonts with-out any hassle."
Contrast Ratio
A simple contrast checking tool that tells you if your choice of text color and background color passes WCAG's guidelines for recommended contrast ratio.
px-em
A px to em tool. Just add the parent px size in the top box and then the required px size in the bottom, and it will tell you what the em value for the child element will be.
grunt-static-inline
A grunt plugin to replace urls from static files such as img,js,css and variables and put them inline in a template. This helps under the notion that inline CSS is faster than external.
Git, GitHub, and Command Line Tools
GitHub Feed
I like this -- a nice lightweight script to display your most recent GitHub repos on a web page.
Octocard
Similar to previous, but this time you can display an entire "card" of info from your GitHub account, onto any web page where you include this script. And it's responsive.
Remindmeto
"A simple, intuitive reminder tool for the command line."
GitHub Résumé
Another tool that uses your GitHub info. This one lets you connect to your GitHub account and produce a resume based on your GitHub account info.
PHPGit
"A Git wrapper for PHP5.3+."
Gitter
"Chat, for GitHub. Free chat rooms for your public repositories. A bit like IRC only smarter. Chats for private repositories as well as organisations."
Git Cheatsheet
A categorized cheatsheet of Git commands.
GitHubReminder
"Receive serendipitous email reminders about forgotten starred repos. Choose either daily, weekly or monthly reminders."
JavaScript Libraries and Frameworks
Highland.js
"The high-level streams library for Node.js and the browser. Highland manages synchronous and asynchronous code easily, using nothing more than standard JavaScript and Node-like Streams."
Phaser
"Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework supporting both JavaScript and TypeScript."
Flight
From Twitter. "A lightweight, component-based JavaScript framework that maps behavior to DOM nodes."
List of Minimalist JavaScript Frameworks
Lots of languages here, including a list for JavaScript frameworks.
Parallel.js
"A tiny library for multi-core processing in Javascript. It was created to take full advantage of the ever-maturing web-workers API."
Check out one of this week's sponsors:
A Tweet for Thought
CSS guru Harry Roberts asks his followers why they don't use a CSS framework.
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 use the Google Play Music player (not available in all countries) to listen to music while you work, you might be interested in this Chrome Extension that gives you an easy-to-access play/pause button, so you don't have to go into the tab to do it directly.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
