Issue #311 (Array.fill(), JS Libs, Media, React)07/04/19
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'];
myArray.fill('Peach');
console.log(myArray);
// ["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:
|
myArray.fill(7, 2);
console.log(myArray);
// ["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);
console.log(myArray);
// ["Peach", "Peach", "Onion", "Onion", 7]
|
And finally, you can use negative values for either the start or end argument:
|
myArray.fill('Apple', -4, -2);
console.log(myArray);
// ["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!
|
JavaScript Libraries and Frameworks
Advanced React & GraphQL - Video Course
With a focus on modern JavaScript and real world application, this course is a start-to-finish way to learn Full Stack Advanced React, GraphQL, Node.js and friends. promoted
Typescene
A robust front end library written in TypeScript: strongly typed, no dependencies, no nonsense.
Stix
A module-based, TypeScript-first Node.js framework.
Riot.js
Now at version 4+ based on a 2-year complete rewrite (details). Simple and elegant component-based UI library.
Litedom
A very small (3kb) view library with web components, custom elements, data binding, one-way data flow, state management, and lots more.
Relay
Now at version 5+ (details). A JavaScript framework for building data-driven React applications.
Angular
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.
Mozart.js
A simple JavaScript pattern for slim, organized Ajax applications. Uses the Scoped Component pattern to logically organize the entire front end into "components", each of which has an API, routes, and events.
faast.js
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.
FKit
Now at version 3+. A functional programming toolkit for JavaScript. It provides many functions for solving common problems with functions, objects, arrays, and strings.
Javali
A CLI like Create React App, but for creating JavaScript libraries using ES6 and Jest.
|
Media Tools
Tech Productivity
A brief weekly newsletter featuring productivity tools, articles, and resources for tech pros. promoted
useAnimations
Library of animated downloadable icons that include SVG and After Effects files.
GIF.com.ai
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.
React Images
A mobile-friendly, highly customizable, carousel component for displaying media in React.
react-vector-maps
React component for interactive vector maps of the world and 100+ countries.
TWGL
A Tiny WebGL helper Library whose sole purpose is to make using the WebGL API less verbose.
Freezeframe.js
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.
Lightweight Charts
Financial lightweight charts built with HTML5 canvas.
pixelmatch
Now at version 5+ (details). The smallest, simplest, and fastest JavaScript pixel-level image comparison library.
React Vertex
Hooks-based WebGL library for React.
PixiJS
Now at version 5+ (details). Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Babylon.js
Now at version 4+ (details). A powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
|
React and Redux Tools
Tech Productivity
A brief weekly newsletter for tech pros who want to get stuff done. promoted
redux-query
A library for managing network state in Redux.
redux-dynamic-modules
Modularize Redux by dynamically loading reducers and middlewares.
react-mosaic
A full-featured React tiling window manager meant to give a user complete control over their workspace.
React Toastify
Allows you to add notifications to your app with ease.
React Hotkeys Hook
React hook for using keyboard shortcuts in components. This is a hook version of the JavaScript utility Hotkeys.js.
downshift
Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components.
React Mentions
A React component that lets the user "mention" people in a textarea, similar to Facebook or Twitter.
react-resize-detector
A cross-browser, event-based, element resize detection component for React.
react-scrollbars-custom
A React component for custom scrollbars.
wouter
A minimalistic ~1KB routing solution for modern React apps that relies on Hooks.
Buffet.js
React components library based on styled-components. A design system for creating better user experiences in application interfaces.
React Rating
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!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
