Web Tools Weekly Issue #170 (Tagged Templates, Media, Jamstack, Productivity)

Issue #170 (Tagged Templates, Media, Jamstack, Productivity)10/20/16

This week's quick tip once again comes from James Hibbard, one of SitePoint's JavaScript content editors. SitePoint produces tons of quality JavaScript articles and they also have a SitePointJS Twitter account that you can follow for all things JavaScript.

In last week's issue, I introduced template literals, an ES6 feature that adds support for multi-line strings and string interpolation to JavaScript. Today I'd like to demonstrate a further powerful feature of template literals: Tagged templates. These enable you to transform the output of a template literal using a custom function. For example:

function upcase(strings, ...values) {

			  return values.map(

			    name => name[0].toUpperCase() + name.slice(1)

			  ).join(' ') + strings[2];

			}

			const first = 'brendan';

			const last = 'eich';

			console.log(upcase`${first} ${last} is the creator of JavaScript!`);

			// Brendan Eich is the creator of JavaScript!

Notice how the upcase() function is called on the last line. This function receives two arguments:

strings — an array of string literals
values — the processed substitution expressions

In our example these will be:

['', ' ', ' is the creator of JavaScript!']
['brendan', 'eich']

There are many potential use cases for tagged template literals. For example, you could use them to sanitize user input in templates, implement a basic form of internationalization, or correctly encode a URL before outputting it. They are also often used to get the raw version of a string where character escape sequences have not yet been processed:

console.log(String.raw`\nBrendan Eich:\t\tCreator of JavaScript\n`);

			// \nBrendan Eich:\tCreator of JavaScript\n

Here's a JS Bin with the above examples. And don't forget to check out SitePoint JavaScript for lots more tutorials and content on modern front-end development.

Now on to this week's tools!

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Multimedia Tools

Hero Patterns
"A collection of repeatable SVG background patterns for you to use on your digital projects."

g9.js
"Automatically interactive graphics. With g9, making an interactive visualization is as easy as making a visualization that isn't."

svg-patterns
"Create SVG patterns programmatically to visualize data. D3 is not required. 5k minified & gzipped."

Waud
"A simple and powerful web audio library that allows you to go beyond HTML5's audio tag and easily take advantage of Web Audio API."

phonograph
"Stream large audio files without the dreaded 'DOMException: play() can only be initiated by a user gesture' error."

Jpeg.io
"Convert any major image format into a highly optimized JPEG."

GraphicsJS
"A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology."

JpegCamera
A JavaScript library that allows you to display a webcam stream on a web page and then capture, show and upload JPEG snapshots to the server.

384 Pages of CSS for $7 (PDF E-Book)

CMS's, Static Sites, etc.

Forestry.io
"A simple CMS for Jekyll and Hugo sites. Built for devs who hate bloat."

Directus
"A headless CMS and API for managing your project’s database content – not your development process."

Bootstrap
"An all-in-one platform to host and launch your website without the hassle of building one."

Jekyll Admin
"A Jekyll plugin that provides users with a traditional CMS-style graphical interface to author content and administer Jekyll sites."

Postleaf
"An open source blogging platform with inline editing, handlebar templates, and a beautiful user interface."

Small Victories
"Takes files in a Dropbox folder and turns them into a website. No CMS, no installation, no server, no coding required."

MODX Revolution
"The flexible and feature complete web Content Management System."

Instant
"Instant content management. Add content management to any website – in under 30 seconds."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Productivity Tools

Mimo
"Learn how to code on mobile. Mimo is a platform for gamified and interactive lesson bites on Computer Science that give commutes, waits and other moments of idle time a meaning."

Fireflies.ai
"A smart assistant that autogenerates tasks from your conversations." Works with any communication channel (Gmail, Slack, Trello, etc.)

Kap
"Capture your screen. An open-source screen recorder built with web technology."

Opentest
Chrome extension. "Capture, narrate and instantly share videos to communicate faster, clearer and friendlier. 100% free."

Airtable
"Works like a spreadsheet but gives you the power of a database to organize anything."

Videolicious
"Millions of employees at leading media companies and brands use Videolicious to quickly and easily create their own business-quality videos."

384 Pages of CSS for $7 (PDF E-Book)

A Tweet for Thought

This is the very definition of outside-the-box thinking.

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're getting into Progressive Web Apps, you might want to bookmark this all-in-one PWA demo.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly