Web Tools Weekly
What a Tool!

Issue #211  (ES4, React Tools, Productivity, Sass)08/03/17

When looking up different JavaScript language features on a resource like MDN, you may have noticed in the "Specifications" section at the bottom of each article that there's never any reference to a 4th version of ECMAScript. You'll often see ES3, ES5, ES2015 (AKA ES6), and a "Latest Draft". But no ES4.

If you're wondering about the history of that, and why ES4 was essentially skipped, you can read a quick summary of the backstory in Nicholas Zakas' book Understanding ECMAScript 6.

In brief, here's what happened:

  • The need for a language that can handle large web apps was seen around 2007, so the spec committee put forth a draft of ES4.
  • The ES4 proposal had lots of changes which many felt were too much. Devs from Google, Yahoo, and Microsoft instead put forth a more incremental change, which they called ES3.1.
  • Attempts to bring ES3.1 and ES4 together failed due to different views on how it should be done.
  • Brendan Eich eventually helped turn ES3.1 into what we now know as ES5, keeping the major changes proposed by ES4 for a future version that was initially called "ECMAScript Harmony".
  • The ES4 name was skipped in the process to avoid confusion with the previously rejected ES4 proposal.
  • ES Harmony would eventually become what we now call ES2015 or ES6.
So there you have it, why we don't have an ES4, just in case you ever wondered.

Now on to this week's tools!
Did you buy my previous JavaScript/DOM tips book? I've released a new one...
70 JavaScript & DOM Tips for $5 (Volume 2)

React Tools

An easy to use, customizable mobile-friendly datepicker.

Terminal in React
React component that renders a terminal.

Collection of reusable low-level visualization components that combines the power of D3.js and React.

Easy to use React tab component with multiple themes, ability to nest tab components, and more.

React Event
Declarative way to handle events outside/inside of React components.

A nice, declarative way of managing JSON API calls with Redux.

TypeScript React Starter
A starter template for TypeScript and React with a detailed README describing how to use the two together.

React Table
A lightweight, fast, and extendable data grid built for React.

Do you like this newsletter? Show your support!
Make a One-time Donation via PayPal.me/WebToolsWeekly

Productivity Tools

Browser Fairy
OSX app that lets you have individual default web browsers for every app and every web page.

A simple Mac app to silence embarrassing notifications while screen sharing.

Simplify and Improve Drag and Drop on your Mac and speed up your daily workflow.

My Desk
Manage your tasks more efficiently. Magically creates the tasks that need your attention and helps you focus only on the stuff you need to do right now.

Lets you plan months ahead and provides a bird’s-eye view of your entire year—automatically detecting your availability and when you’re overbooked.

Multi-featured expense tracker as a PWA, built with React and Google Sheets.

Still in early development. An open source, productivity-style feed reader for Mac.

Helps your customers find the best way to contact you or your company.

Awesome Screenshot
Screenshot management, collaboration, and feedback tool, with Chrome extension.

Chrome, Safari, Firefox, iOS. Highlight and save your favorite quotes. Syncs across desktop and mobile. Leave highlights on news articles, blog posts, PDFs, and more.

Do you like this newsletter? Show your support!
Make a One-time Donation via PayPal.me/WebToolsWeekly

Sass and Less Tools

Minimal, robust SCSS framework for rapid UI development.

Less Grid Boilerplate
A lightweight 12-column CSS grid system built with CSS Grid and Less.

Sass debugger
Provides a way to debug your project with a visual highlight style preview based on some options that you can customize.

A powerful but easy-to-use Sass media query mixin.

A @font-face generator for SCSS with some advantages over Font Squirrel's generator.

Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.

Sassy Sass
Two year old project, so might be out of date. A scaffolding tool to help you organize your project’s Sass structure.

A Tweet for Thought

Got a coding screw-up story? This thread has a few.

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

This could be useful: DomainHack.Me lets you search for a domain name like "del.icio.us" or "instagr.am", using country TLDs, subdomains, etc.

Thanks to all for subscribing and reading!

Keep tooling,