Issue #250 (ES6 Sets, Media, CSS/HTML, Vue)05/03/18
Secure and Manage Your Apple Devices
Jamf Now is a device management solution for Apple devices. It's cloud-based, so you can manage devices from anywhere. Not tech savvy? It's easy to manage Apple devices with Jamf Now and your first 3 devices are free, forever!
Create your account!
|
|
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();
set.add(1);
set.add('two');
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
Jamf Now
A device management solution for Apple devices. It's cloud-based, so you can manage devices from anywhere. Not tech savvy? It's easy to manage Apple devices with Jamf Now and your first 3 devices are free, forever! sponsored via Syndicate
Auditus
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+.
Shotcut
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).
coördinator
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.
Crunch
A macOS tool for lossy PNG image file optimization.
Video.js
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
|
CSS and HTML Tools
Eggradients
A gallery of background gradients for new projects.
graphql-css
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.
sass-is-int
A lightweight Sass function that determines whether a number is an integer or not.
sass-extract
Extract structured variables from your sass files with no effort.
CSS via Components
A single React component to inject CSS with ease.
Launchy
An accessible, keyboard friendly modal window.
The CSS Grid
A collection of resources and tools to help you manage your CSS Grid code.
|
Vue Tools
Vue Design System
An open source tool for building design systems with Vue.js.
vue-content-loader
SVG component to create placeholder loading, like Facebook cards loading.
vue-cli
The official Vue CLI for rapid development of Vue apps and websites.
mpvue
Site is in Chinese but translates to: A front-end framework for developing applets using Vue.js.
vue-promise-btn
Vue.js plugin that handles asynchronous lock and loading state indicator for buttons.
vue-ethereum-ipfs
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.
vue-tour
A lightweight, simple and customizable tour plugin for use with Vue.js.
Charcoal
A starter template using the Vue CLI, webpack-simple, and Bulma (the popular flexbox-based CSS framework).
fish-ui
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
