Web Tools Weekly
What a Tool!

Issue #261  (ESX, Uncats, JS Utils, Media)

If you're confused when articles, tutorials, and social media posts use the terms ES6, ES2015, ES2016, ES7, ES.Next, etc. then you're not alone. I'm sure many have wondered why there seem to be overlapping terms for all the recent additions to the ECMAScript specification.

Here's a quick summary of what these terms mean, and what terms we generally should be using today.

ES6 was the successor to ES5, so the name for that was obvious. The problem was that ES6 took four years to develop and it seemed impractical to have to wait that long for new features to become official standards and start being added to browsers.

To improve on this, starting with post-ES6 releases, it was determined that the releases would be yearly and would be named after the year in which they were developed. This is why we now have ES2016, ES2017, and ES2018. Even ES6 has been renamed to ES2015 (although in this case, I think it's fine to just say ES6, because so many books and blog posts use the name). Generally speaking, the spec uses both names (e.g. ES2018 is also called "ECMA-262, 9th edition"), so you'd be forgiven if you just used the names ES7, ES8, etc.

As for ES.Next, the Wikipedia article on ECMAScript says:

"ES.Next is a dynamic name that refers to whatever the next version is at time of writing. ES.Next features are more correctly called proposals, because, by definition, the specification has not been finalized yet."

There's no source currently attached to that quote on Wikipedia, so take that with a grain of salt (as you should anything not sourced on Wikipedia). But I think that does sum it up fairly well.

In my opinion, it's probably best to use the terms ES5, ES6, ES2016, ES2017, ES2018, and ES.Next. Although there's a lack of naming consistency there, it's a matter of doing what's most familiar, which I think is more practical for everyone.
 

Now on to this week's tools!

The Uncategorizables

mermaid
A simple markdown-like script language for generating charts from text via JavaScript.

mkcert
A simple zero-config tool to make locally trusted development certificates with any names you'd like.

Send Rest
A Simple API to schedule Email, SMS, and Webhooks.

HelpRange
Instant and easy PDF tracking. Find out who is reading your document, when, which pages and for how long.

Qeys.io
Allows you to generate unique license keys for your apps, and offers you a one line solution (in combination with a 0.8KB JavaScript file) into protecting your applications from being copied.

idyll.pub
A framework for authoring and publishing interactive posts on the web.

Webtask
Backend-as-a-Token for your application. A simple, lightweight, and secure way of running isolated backend code that removed or reduces the need for a backend.

itty.bitty
Portable, private, and easy to share self-contained sites via a single link.

Docz
MDX-based documentation that's described as the easiest way to document your components.

Molecular
Progressive microservices framework for Node.js.

Subform
Visual tool for creating dynamic UI layouts. It replaces drawing a lot of pictures—or the endless tweak-reload-tweak cycle—with direct editing and immediate visual feedback.

Recommended Reading for Developers
Learning React Book   CSS Secrets Book   CSS in Depth Book

JavaScript Modules and Utilities

simple-keyboard
The easily customisable and responsive on-screen virtual keyboard for JavaScript projects.

Axax
A library of async iterator extensions for JavaScript including map, reduce, filter, flatMap, pipe, and more.

Microstates
A functional runtime type system designed to ease state management in component based applications. It allows you to declaratively compose application state from atomic state machines.

HyperMD
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

DropIt
A file uploader built with Node.js. Upload, get a link, and share your files with anyone easily.

Priority Nav Scroller
A plugin for the priority+ navigation pattern. When the navigation items don’t fit on screen they are hidden in a horizontal scrollable container with controls.

Yett
A small library to control the execution of third-party scripts like analytics.

casex
All-in-one function for transforming word casings (lowercase, uppercase, title case, snake case, etc).

Ow
Function argument validation for humans. Features an expressive chainable API, lots of built-in validations, and custom validations.

Day.js
2KB immutable date library alternative to Moment.js with the same modern API.

Length.js
JavaScript library for length units conversion.

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

Media Tools

Phenomenon
Small, low-level WebGL library that delivers a high performance experience, built around the idea of moving millions of particles around using the power of the GPU.

SpriteJS
A cross-platform lightweight 2D object rendering model. Manipulate the sprites on a canvas as you do with DOM elements.

Paper.js
An open source vector graphics scripting framework that runs on top of the HTML5 Canvas.

BoxIcons
High quality web friendly icons. Carefully crafted vector icons, perfect for use in your next project, as a web component or font, or just download the SVG.

Gio.js
A declarative 3D globe data visualization library built with three.js.

Rabbit Ear
A creative coding JavaScript library for designing origami.

Lepto
Automated image editing, optimization and analysis via CLI and a web interface.

Gradient Joy
Beautiful gradients as placeholder images. Just append image size to the URL and you'll get a placeholder.

Vivid.js
An SVG icon library that can be used to add highly customizable vibrant icons to the DOM without any dev dependencies.

G6
A JavaScript-based graph visualization framework that provides a set of base mechanisms to build a graph visualization analysis application.

MapKit JS
JavaScript library from Apple lets you add interactive maps to web pages — complete with annotations, overlays, and interfaces to Apple Maps services.

A Tweet for Thought

Here are four things every software engineer should do, courtesy of Nicholas Zakas.
 

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

DevTube is a huge and growing collection of tech and developer videos, optionally filtered by category, speaker, or YouTube channel.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly