Web Tools #368 - JS Utilities, SVG Tools, Git/CLI

ES6 introduced the somewhat overlooked .entries() method for Array, Map, and Object. The concept for this method is the same for all three, but in this intro I'll focus on its use with arrays.

As explained on MDN, the "entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array."

This is useful for matching an array element's value to the index in the array. For example, a for...of loop iterates through the elements. I can combine for...of with Array.entries() to directly relate the values to their indexes.

Try it on CodePen

The above example also uses destructuring assignment to grab the key/value pairs (or, to be more specific the index/value pairs). The destructuring takes place where you see the square brackets before the word 'of' in the loop head. This allows me to extract the values on each iteration without the need for any fancy conditionals or other clutter. You can see how both the index and the value are logged with minimal code.

As mentioned, entries() exposes an iterator object. This object also opens up use of the next() method, which itself returns an object. For example if I was using Array.entries() without a loop, I could move through the items like this:

Try it on CodePen

Each time I use next(), the iterator moves to the next item. As you can see, I don't have to make any kind of special request for the index of each item; it's just there, along with the array entry.

Did you like this JavaScript tip? I've collected together tons of similar tips with 200+ CodePen demos in my JS/DOM E-Books Bundle.

Now on to this week's tools!

JavaScript Utilities

Isdis
A key/value storage library to cache requests with LocalStorage.

Bueno
A tiny, composable validation library that aims to be an improvement on older form validation libraries, but can also be used as a lightweight API validation library.

routeward
Provides an easy, relatively literate, declarative way to generate helper methods that return the URL paths your app relies on.

tinykeys
A tiny (~400b) modern library for keybindings. Includes examples you can try right on the page.

Inclusive Dates
A human friendly date picker module that lets the user pick dates using natural-language phrases like 'tomorrow' or 'in 5 days'.
 
Taap
A lightweight zero dependency Typescript type checking library that coerces unknown value types. More concise and accurate than typeof checks, etc.

Super Expressive
A zero-dependency JavaScript library for building regular expressions in (almost) natural language.

DataGridXL
A performant and reliable vanilla JavaScript data grid with Excel-like controls.

Moufette
An embeddable JavaScript widget to collect user feedback and user votes on upcoming features. Includes a dashboard to view feedback and customize.

Vest
A validations library for JavaScript apps that derives its syntax from modern unit testing frameworks like Mocha or Jest.

turven
Lets visitors on a website see how many other people are also reading the same page.

Overmind
A frictionless state management library with a focus on the developer experience.

js-coroutines
Run complex calculations on your app while maintaining 60fps for a smooth and interactive experience.

Media Tools (SVG, Audio, Video, etc.)

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity.   promoted

Ara
Free illustration creator with more than 120+ illustrations, allowing you to create your own illustration scene compositions.

RecordRTC
A WebRTC JavaScript library for audio/video as well as screen activity recording.

Forge Icons
A set of 300+ SVG icons ideal for e-Commerce, travel, social media, and more.
 
Pikwizard
Library of over 1 million stock images and videos. Royalty free and safe for commercial use, with no attribution required.

Black Illustrations
Beautiful, free illustrations of black people for your next digital project.

Warp SVG
Online tool that lets you add an SVG file that you can then warp, skew by grabbing node/handles on the SVG. Then you can save the result as a new SVG.

tsParticles
A lightweight, dependency-free TypeScript library for creating particles, based on the old particles.js project.

XP Paint
A web version of MS Paint from Windows XP. Lets you save as PNG when you're done drawing.

AudioMass
A free web-based audio and waveform editor that runs entirely in the browser with no back end or plugins required.

svg-to-react
A utility to convert raw SVG files into accessible and extendable React components.

BrowserFrame
The easiest way to wrap screenshots in browser frames. Supports multiple browsers, operating systems, and themes.
 

Git, GitHub, and CLI Tools

FrontAid CMS
A decoupled and Git-based content management system that stores content in your own Git repository in JSON format.

GitHub Profile README Generator
A wizard-like page that lets you create a GitHub readme in Markdown format that you can use as your GitHub profile.

Bashō
A JavaScript evaluator for shell scripts. Lets you write complex shell tasks using plain JavaScript and mixes well with shell commands and scripts so you can choose the best tool for the job.

Runme
Generates a "runme" button to embed in your GitHub repo so you can run your application from any public repo with one click.
 

Simple Bash Prompt
A simple bash prompt modeled after a popular Python-based shell prompt, but this one is pure bash.

Profiled
Generates a beautiful, organized portfolio from the info in your GitHub account in seconds.

import
A simple and fast module system for Bash and other Unix shells.

watchlist
Recursively watch a list of directories and run a command on any file system changes.

Sigmetic
A toolkit that collects data from your GitHub organization and provides a full picture of habits and trends, detects and diagnoses destructive practices, etc.

githubbox
Quickly open any GitHub repo in CodeSandbox. Visit any GitHub repo and replace github.com with githubbox.com.

mdjs-viewer
Allows you to execute code and show interactive demos within your markdown documentation on a GitHub readme or in GitHub issues.

A Tweet for Thought

This cartoon from the Daily Mirror, England from January 23, 1923 is about mobile phones!
 

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

(Warning, this link contains multiple flashing animations). If you used to play or write games in Flash, you'll enjoy this little trip down memory lane: How Flash Games shaped the video game industry.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly