Issue #250 (ES6 Sets, Media, CSS, Vue)
You can create a set in ES6 by passing an array into the constructor:
Try it on JS Bin
let set = new Set([1, 2, 3, 3, 4, 5, 5, 5, 6]);
console.log(set.size); // 6
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:
Try it on JS Bin
let set = new Set();
console.log(set.size); // 2
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:
Try it on JS Bin
console.log(set.has(1)); // true
console.log(set.has('two')); // true
console.log(set.has(3)); // false
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!
Simple e-book to audio book conversion.
VLC Media Player
The popular media player is now at version 3+.
A free, open source, cross-platform video editor.
Online tool to turn an SVG into XY coordinates.
TOAST UI Chart
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.
Generate website screenshots and thumbnails at scale. API is highly configurable and integrates easily with top programming languages and frameworks.
Recommended Reading for Developers
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.
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!