Web Tools Weekly
What a Tool!

Issue #247  (ES5 Multi-line Strings, CSS, Text Editors, Build)

Before ES6's template literals were introduced, doing multi-line strings in JavaScript was a little messy, but possible. Oddly, for the longest time, I always thought the following was perfectly valid JavaScript:

var message = "This is a \
               multi-line string.";

The idea here is that, for whatever reason, I want my string to break onto multiple lines without closing the quotes. Inserting the backslash at the end of the line allows me to get away with this in pre-ES6 code.

But the fact that all browsers basically handled this the same way (i.e. allowing multi-line strings to work) was not a language feature, but a bug. And many style guides and linters, as I'm sure many of you have learned, will warn about this. For example, see this JSFiddle that gives a JSHint warning: "Bad escaping of EOL. Use option multistr if needed."

So if you don't want to have a warning like that in your linting workflow when using pre-ES6 multi-line strings, you can do this:
 
/*jshint multistr: true */
var message = "This is a \
               multi-line string.";

Try on JSFiddle

Of course, this doesn't solve the problem, but it prevents the warning and will likely make you feel superficially warm and fuzzy inside. You can also do something similar in linters with config options, rather than as a JavaScript comment.

Google's JavaScript Style Guide advises against this and recommends using regular string concatenation to mimic the same idea:
 
let message = "This is a " +
              "multi-line string.";

One final point that you may not have known with regards to these old-school multi-line strings: If you put a space after the backslash, the code will fail. Google's guide warns specifically about this.

There are other old solutions to this problem, which you can read about in this old and lengthy Stack Overflow thread. Some of the answers are quite creative (e.g. using an array to mimic it) and you also get a pretty good history lesson on bugs and browser support in relation to this topic.

As mentioned, template literals make this basically obsolete except for legacy-based requirements. See issues 169 and 170 in the newsletter archives for a couple of tips on how to use those.

Now on to this week's tools!

CSS and HTML Tools

styled-components
Now at version 3+. Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.

Delighters
Add CSS animations to delight users as they scroll down.

Woah.css
A CSS animation library for eccentrics.

react-css-grid-table
A React table library using CSS Grid Layout.

Lemon Reset
A set of React components that provide reset styles from Eric Meyer's CSS rest for use with CSS Modules.

CSS Gradient
Online interactive CSS gradient generator plus pre-built attractive gradient examples.

CSS-Only Cursor Tracking
A proof-of-concept in the category of "evil CSS" that's been discussed recently. For similar stuff: Crooked Style SheetsCSS Keylogger, SpyCss.

Jumprock
HTML Forms for static sites. Send a form from your static site to a Jumprock URL and they'll deliver it to your inbox.

Purgecss
Remove unused CSS that can be used as part of your development workflow.  Comes with a JavaScript API, a CLI, and plugins for popular build tools.

chamfer.js
Adds "chamfered" corners (kind of like the corners of an octagon) to any HTML element with two available methods.

Recommended Reading (Affiliate Links via Amazon)
   

Text Editors,  Code Playgrounds, IDEs

GitLab Workflow
VSCode extension that integrates GitLab to VSCode by adding GitLab-specific options to the command palette and status bar.

Polacode
VSCode extension to create pretty screenshots of your code.

Altair GraphQL Client
A beautiful feature-rich GraphQL Client for all platforms.

TeaCode
A code shortcut and text expander app that helps you write code super fast. Available for macOS with plugins for Atom, Sublime, and VSCode.

GhostText
Use your text editor to write in your browser. Everything you type in the editor will be instantly updated in the browser.

vim-anywhere
Use Vim everywhere you've always wanted to.

Rainglow
A collection of over 320 themes for a variety of different editors and software.

Conclave
An open-source, real-time, collaborative text editor for the browser built from scratch in JavaScript.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Bundlers, Build Tools, Task Runners, etc.

react-hot-loader-loader
A webpack loader that automatically inserts react-hot-loader (which lets you tweak React components in real time) into your app.

jest-styled-components-stylelint
Run stylelint (the CSS linter) on your styled-components styles at runtime.

mini-css-extract-plugin
Plugin for webpack that extracts CSS into separate files. Creates one CSS file for every JavaScript file that contains CSS.

raw.macro
Read file contents at build time via babel-plugin-macros.

Speed Measure
Measures your webpack build speed, providing an output on which you can base your optimizations.

HTML Webpack Plugin
Plugin that simplifies creation of HTML files to serve your bundles.

Webpack Now Loader
A webpack loader that deploys the required resource to Now (static files or full deployments) and returns a URL to the deployment.

Continuous Pipe
The open-source continuous deployment solution for your containerized applications to Kubernetes clusters.

Smaller
A powerful HTML, CSS, and JavaScript compressor and file concatenator for OSX to make your websites load faster.

webpack
The popular module bundler is now at version 4+. Details here.

Gulp
Not to be outdone, the popular task runner is also now at version 4+.

A Tweet for Thought

Should new web standards break the legacy web? Many think so.
 

Send Me Your Tools!

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...

CodeTriage is a place to find open source projects that are looking for help. You know, if you're into doing free work.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly