|
|
|
|
Issue #157 (Blank Lines, Sass, Testing, Productivity)07/21/16
| This week's primary sponsor: |
Something related to code maintenance that you may have neglected to think about is the use of blank lines. Opinions will vary wildly as to what's right and wrong in this area, but I like the suggestions provided by Nicholas Zakas in his book Maintainable JavaScript. He says, "Blank lines should be used to separate related lines of code from unrelated lines of code." To demonstrate, here is a chunk of code similar to the one used in his book:
|
if (one && two.length) {
for (i = 0, l = two.length; i < l; ++i) {
j = one[i];
k = this.doSomething();
if (this.something) {
if (this.anotherThing) {
doWhatever();
} else {
doAnotherWhatever();
}
}
}
}
|
The code itself is meaningless and only theoretical. But we can improve our ability to scan this chunk of code by using blank lines. Here's the same code, improved:
|
if (one && two.length) {
for (i = 0, l = two.length; i < l; ++i) {
j = one[i];
k = this.doSomething();
if (this.something) {
if (this.anotherThing) {
doWhatever();
} else {
doAnotherWhatever();
}
}
}
}
|
You can instantly see the difference just by scanning each block. I like Zakas' literary analogy when he says, "code should look like a series of paragraphs rather than one continuous blob of text." He recommends blank lines before flow control statements, between methods, before comment lines, and between logical sections inside methods.
I'm sure many of you do this sort of thing already, but I've certainly seen code that doesn't use blank lines too often, so this might be a good reminder for many of you who haven't started doing it, or those of you who are like me and don't necessarily have a standard system in place for using blank lines.
Now on to this week's tools!
Sass and Preprocessor Tools
Palette Town
Sass mixin for generating color palettes.
Avalanche
"Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system."
Angled Edges
"A SASS mixin for creating angled edges on sections by dynamically encoding SVGs."
fault
"A comprehensive collection of default CSS settings for HTML5 tags as Silent Sass Classes and Mixins."
grunt-sass-import
"A Grunt module for importing Sass partials with (some very basic) notion of source order."
flex_e_ble
"A simple yet flexible Sass class naming structure on top of a flexbox based grid."
sass-deprecate
"Let Sass warn you about the pieces of your UI that are deprecated, providing a clear upgrade path for developers."
Cutestrap
"A sassy, opinionated CSS Framework. A tiny alternative to Bootstrap."
SassBlocks
"Introduces a pattern to make working with BEM-blocks/modules in Sass/SCSS a little more OOP."
Fawkss
"A CSS preprocessor for people who dislike CSS preprocessors."
Progress Tracker
"A flexible Sass component to illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz."
Testing and Debugging Tools
Easy Sauce
"A Node.js library that makes it easy to run JavaScript unit tests on the Sauce Labs cloud."
Code Climate
"Get automated code review for test coverage, complexity, duplication, security, style, and more, and merge with confidence."
gremlins.js
"A monkey testing library written in JavaScript, for Node.js and the browser. Use it to check the robustness of web applications by unleashing a horde of undisciplined gremlins."
Browser Calories
Chrome, Firefox, or Opera extension to "help you set a performance budget and measure if a page is exceeding these numbers or not."
ESLint
"The pluggable linting utility for JavaScript and JSX." Now at version 3.x.
promise-log
"Shortcut for console.loggin' your promises."
speedline
"Calculate the speed index and visual performance metrics from chrome dev tool timeline."
FullStory
"Lets your company easily record, replay, search, and analyze each user's actual experience with your website. Think of it as your team's super-searchable DVR for all customer interactions."
raf-stub
"Accurate and predictable testing of requestAnimationFrame and cancelAnimationFrame."
axe-core
"The Accessibility Engine for automated testing of HTML-based user interfaces."
HTMLTest
"How well does your browser support html5?" Recently updated to add new specifications, less importance for prefixes, and more.
Productivity Tools
Paws for Trello
"A beautiful Trello client for Mac and Windows. It brings Trello to your desktop with native notifications, powerful shortcuts and more - away from the distractions of your browser."
Snapdrop
"The easiest way to transfer data across devices."
Officehours
"Connects you with amazing people, for 10 minutes of free 1-on-1 advice."
Tunnel Vision
"See your next available Trello tasks every time you open a new tab."
Laps
"Client, Project and Time management in a simple, modern & beautiful way."
cq: Code Query
"A tool to extract code snippets using selectors (instead of line numbers). Supports JavaScript ES5, ES6, JSX, and TypeScript."
Mochimarks
Bookmarking website focused on helping you regularly use your bookmarks, with features such as reminders, wishlists, ranking, sharing, and rediscovery suggestions.
Focus
"A Mac app to block distracting websites like Facebook and Reddit."
Paste 2
"A new way to copy and paste for your Mac. It keeps track of everything you've ever copied and lets you access your clipboard history anytime."
BrowserFreedom
"Sits in between your links and the web browsers installed on your Mac. You can define rules to always open certain websites on a specific browse."
YakYak
"Desktop chat client for Google Hangouts."
Microsoft Planner
For Office 365. "Makes it easy for your team to create new plans, organize and assign tasks, share files, chat about what you’re working on, and get updates on progress."
SaneBox
"Learns what email is important to you and filters out what isn't – saving you from endless interruptions."
A Tweet for Thought
Ancient, clunky, and rusted? It all checks out.
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...
I think I like the YouTube TV interface better than the regular YouTube UI.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
