Issue #311 (Array.fill(), JS Libs, Media, React)
New since ES6 and supported in all browsers except IE11 is the Array.fill() method that allows you to fill an array (or replace existing values) with new specified ones.
For example, if you have an existing array of five items, you can fill all the slots with the same value:
let myArray = ['one', 'two', 'three', 'four', 'five'];
// ["Peach", "Peach", "Peach", "Peach", "Peach"]
Passing in a single argument will replace all values with the value of that argument (which could also be an expression that evaluates to something).
You can also provide a second argument that will specify where you want to begin inserting the given value and it will fill all items starting from that index:
// ["Peach", "Peach", 7, 7, 7]
If you use the third argument, you specify that you want the given value to fill the array from the start value up to, but not including, the end value:
myArray.fill('Onion', 2, 4);
// ["Peach", "Peach", "Onion", "Onion", 7]
And finally, you can use negative values for either the start or end argument:
myArray.fill('Apple', -4, -2);
// ["Peach", "Apple", "Apple", "Onion", 7]
The negative values more or less count from the end of the array, but without the zero index.
This is a useful method if you need to fill an array that needs to, for whatever reason, conform to a specified length or size. Here's a CodePen demo with all the above examples.
Now on to this week's tools!
Advanced React & GraphQL - Video Course
A robust front end library written in TypeScript: strongly typed, no dependencies, no nonsense.
A module-based, TypeScript-first Node.js framework.
Now at version 4+ based on a 2-year complete rewrite (details). Simple and elegant component-based UI library.
A very small (3kb) view library with web components, custom elements, data binding, one-way data flow, state management, and lots more.
Now at version 8+ (details). This is a major release spanning the entire platform, including the framework, Angular Material, and the CLI with synchronized major versions.
Serverless batch computing made simple. Makes regular functions callable as serverless functions on AWS Lambda and Google Cloud. It handles the details of uploading your code, creating cloud infrastructure, and cleaning up.
A brief weekly newsletter featuring productivity tools, articles, and resources for tech pros. promoted
Library of animated downloadable icons that include SVG and After Effects files.
An All-In-One GIF animation solution. Get creative in your own GIF sandbox. Animate anything in realtime. Make an animated GIF using the entire web as your canvas.
A mobile-friendly, highly customizable, carousel component for displaying media in React.
React component for interactive vector maps of the world and 100+ countries.
A Tiny WebGL helper Library whose sole purpose is to make using the WebGL API less verbose.
Now at version 4+. A library that pauses animated .gifs and enables them to animate on mouse hover, mouse click, touch event, or with trigger/release functions.
Financial lightweight charts built with HTML5 canvas.
Hooks-based WebGL library for React.
Now at version 5+ (details). Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
React and Redux Tools
A brief weekly newsletter for tech pros who want to get stuff done. promoted
A library for managing network state in Redux.
Modularize Redux by dynamically loading reducers and middlewares.
A full-featured React tiling window manager meant to give a user complete control over their workspace.
Allows you to add notifications to your app with ease.
React Hotkeys Hook
Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components.
A React component that lets the user "mention" people in a textarea, similar to Facebook or Twitter.
A cross-browser, event-based, element resize detection component for React.
A React component for custom scrollbars.
A minimalistic ~1KB routing solution for modern React apps that relies on Hooks.
React components library based on styled-components. A design system for creating better user experiences in application interfaces.
A React rating component (e.g. 5-star rating) that supports custom symbols both with inline styles and glyph icons found in popular CSS toolkits like Font Awesome or Bootstrap.
A Tweet for Thought
Jason Kottke asks why people turn on captions (subtitles) on their TVs. The gist of most answers is the same, but it was interesting to hear everyone's personal nuances on their reasons why and how one piece of ancient technology can be useful for so many variations of more or less the same circumstance.
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...
If you're not a native English speaker, you will absolutely love YouGlish. Search for a word you're not sure how to pronounce and it will pull up a YouTube video at the exact time that the word is spoken. It also has six other languages if you're trying to learn word pronunciation in one of those.
Thanks to all for subscribing and reading!