Web Tools Weekly
What a Tool!

Issue #250  (ES6 Sets, Media, CSS, Vue)

While arrays in JavaScript are useful (as they are in any language), they require a little wrangling if you don't want an array to contain duplicates. That's why ES6 introduced sets, a new type of collection that cannot contain duplicates.

You can create a set in ES6 by passing an array into the constructor:

let set = new Set([1, 2, 3, 3, 4, 5, 5, 5, 6]);

console.log(set.size); // 6

Try it on JS Bin

Notice the array I passed in contains duplicates. But the set essentially strips them out and I'm left with a collection of 6 unique items (instead of the original 9 with duplicates), which is much more useful in certain situations.

You don't have to pass in an array to create a set, but that's one way to do it. You also have access to the add() method, so you can do this:
let set = new Set();


console.log(set.size); // 2

Try it on JS Bin

Finally, there's the has() method, which is probably what you'll use the most. This method allows you to check if an item exists. And because sets can't contain duplicates, it's a simple check, then you can move on to other things without any complexities:
console.log(set.has(1)); // true
console.log(set.has('two')); // true
console.log(set.has(3)); // false

Try it on JS Bin

That's ES6 sets in a nutshell. The feature has strong browser support, which you can review at the bottom of MDN's article on the subject.

Now on to this week's tools!

Media Tools

Simple e-book to audio book conversion.

Path Slider
JavaScript utility for animating elements along SVG paths.

VLC Media Player
The popular media player is now at version 3+.

A free, open source, cross-platform video editor.

Popmotion Pose
Declarative motion system for HTML, SVG, React (based on Popmotion, the popular JavaScript animation library).

Online tool to turn an SVG into XY coordinates.

Beautiful customizable data visualization charts with IE8 support.

React Graceful Image
A React image component for gracefully dealing with image errors by providing optional lazy loading, optional placeholder, and configurable retries on failure.

A macOS tool for lossy PNG image file optimization.

Now at version 7+ (release candidate). Web video player for HTML5 and Flash video, with YouTube and Vimeo support through plugins.

Screenshot Bin
Generate website screenshots and thumbnails at scale. API is highly configurable and integrates easily with top programming languages and frameworks.

Recommended Reading for Developers
Learning React Book   CSS Secrets Book   Secrets of the JavaScript Ninja Book

CSS and HTML Tools

A gallery of background gradients for new projects.

A blazing fast CSS-in-GQL™ library that converts GraphQL queries into styles for your components.

CSS Declaration Sorter
Sort CSS declarations fast and automatically in a certain order.

Midi Controller CSS
Atom package that allows you to use the Korg NanoKontrol midi controller to physically edit your PostCSS files.

A lightweight Sass function that determines whether a number is an integer or not.

Extract structured variables from your sass files with no effort.

CSS via Components
A single React component to inject CSS with ease.

An accessible, keyboard friendly modal window.

The CSS Grid
A collection of resources and tools to help you manage your CSS Grid code. 

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

Vue Tools

Vue Design System
An open source tool for building design systems with Vue.js.

SVG component to create placeholder loading, like Facebook cards loading.

The official Vue CLI for rapid development of Vue apps and websites.

Site is in Chinese but translates to: A front-end framework for developing applets using Vue.js.

Vue.js plugin that handles asynchronous lock and loading state indicator for buttons.

Distributed application starter: Vue front-end, Ethereum / IPFS Backend.

Vue Enterprise Boilerplate
An ever-evolving, opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3.

A lightweight, simple and customizable tour plugin for use with Vue.js.

A starter template using the Vue CLI, webpack-simple, and Bulma (the popular flexbox-based CSS framework).

A Vue.js 2.0 UI toolkit for the web.

A Tweet for Thought

Twitter recently added the ability to add descriptions to images in tweets (for accessibility). This thread contains suggestions for useful image descriptions, which are also good suggestions for using alt text in HTML.

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

whoshiring.news is an RSS feed of Hacker News' popular "Who's Hiring" threads, which appear monthly. This feed contains links to each individual comment in those threads, not just the main thread itself.

Thanks to all for subscribing and reading!

Keep tooling,