Web Tools #489 - Array.values(), Media Tools, React, Git/CLI

Advertisement

Here's another practical and relatively new array method that's now supported in all modern browsers: The Array.values() method. This method returns an array iterator object that iterates each value in the array.

Here's an example:

The above code uses a for...of loop to log each of the values of the array, one at a time. As you can see, this is a really easy way to iterate through all of an array's values.

As mentioned, the method returns an iterator object. This means instead of using a loop to automatically go through the values, you can use the iterator.next() method, which allows you to move to the next item in the array as needed.

Note the following code:

You can try both of the above examples in this CodePen demo.

In the latter example, notice in the demo that I'm using the next() method five times. This takes the iterator through all the elements in the array. Each move through the array returns an object with two key/value pairs: The current item and a Boolean indicating whether the iteration is "done".

Once the iterator is done, it will no longer iterate the items and it won't return any values. This is the case whether you're using a loop or the next() method on the iterator object.

A couple of other things to note:

• When iterating through sparse arrays (i.e. arrays with empty slots), the empty slots are treated the same as undefined (that is they are iterated to).
• If you use a break statement to end iteration, you can continue iterating where you left off.

Overall this seems like a useful feature, particularly the ability to loop through all the items quickly and cleanly.

Now on to this week's tools!
 

Media Tools (SVG, Images, etc.)

The Future Of Tech, Delivered Today.
Join over 450K people by reading Emerging Tech Brew, the 3-times-a-week email delivering the latest tech news impacting our future. From drones and AI to climate tech and robotics – if it affects your world, Emerging Tech Brew has you covered.     SPONSORED  

Skware
A set of 100 "pixelated" icons that have a retro video game or 1980s vibe, available in SVG, PNG, or as a Figma community file.

Browser Logos
A repository of transparent, high-resolution logos for just about any browser, for use in presentations, blog posts, etc.

Jimpl
Online tool to view or remove EXIF data for any image. Drag and drop any image up to 50MB, all files deleted after 24 hours.

Boxy SVG
An online tool to edit SVG files that has a simple Photoshop-like UI, installable as a PWA or as a native app for Mac or Linux.

Imagator
Local-only web-based tool to compress, convert, edit, and resize images. The compressor gives you a before/after slider for quality checks.

Logo To Use
A one-stop location that has millions of free, contributed logos you can use for commercial projects, available in color, white, or black.

Lucide
This is a fork of Feather Icons, expanding to a set of 860+ icons in SVG or PNG format, with integrations for all major frameworks.

JSON2Video
A video creation and video editing API aimed to automate the creation of marketing and content videos programmatically.

Womp
An easy-to-use 3D creation and publishing app, free while in Alpha, that allows you to create, edit, share, and render unique 3D content effortlessly from the browser.

CodeLet
Online tool to create images of code snippets for sharing on social media.
 

React Tools

Get Access to Marketing and Sales Resources
The ultimate industry insider hack, The Juice aggregates career-enhancing resources from top brands and thought leaders and organizes them in one place, so you don't have to keep filling out marketing forms for access.   SPONSORED  

Clapy
Figma plugin to export custom React components from any Figma design.

audio-player
A music player with custom controls, playlist, filters, and search for React and Next.js projects.

react-json-to-csv
A React button component to easily generate CSV downloads of JSON data.

use-modal-hook
A React hook for controlling modal components.

gl-react
A React library to write and compose WebGL shaders, that requires use with one of a set of other WebGL React implementations.

react-stick
A React component that allows you to attach an absolutely positioned node to a statically positioned anchor element.

react-hanger
A collection of 15+ useful React hooks for performing various tasks on the page.

Found
A router for React that uses static route configurations with a focus on power and extensibility.

React Reactions
An old project. A React emoji picker or "reactions" component that lets you use reactions and emojis from Slack, Pokemon, GitHub, Facebook, and YouTube.

On the Release Radar:

• Downshift – WAI-ARIA compliant React components at version 7+
• React Table Library – Almost headless table library now at version 4+
• react-digraph – Directed graph editors for React at version 8+
• Haunted – React's Hooks API for web components at version 5+
• React Flow – React node diagrams now at version 11+
• react-big-calendar – React events calendar now at version 1+

Git, GitHub, and CLI Tools

It's Time To Rethink Your Media Diet
There’s a reason our friends at The Daily Upside are the fastest growing finance newsletter in the country. See why 750k+ readers trust their expert team for crisp, easy-to-read market insights – free, always.   SPONSORED  

Sharing
A command-line tool to share directories and files from the CLI to iOS and Android devices without the need of an extra client app.

hiSHtory
A shell history extension that keeps track of the commands you run, but also adds context, e.g. how long it took to run, whether it succeeded or failed, where you ran it, and on what machine.

Bugasura
A simple, fast and agile approach to reporting, tracking, and closing issues. Free plan is up to 5 users, unlimited projects.

Documatic
A search engine for your codebase that lets you find relevant code snippets and insights in seconds by asking a question. Free for open-source teams up to 5 projects.

CodeSandbox for GitHub
Official GitHub app for CodeSandbox, the popular online code collaboration tool.

FFmpeg.guide
A simple GUI to create complex FFmpeg filter graphs quickly and correctly, without having to mess with the cumbersome filter syntax.

GitHub Blocks
From GitHub, in Technical Preview. Extend your codebase with custom, interactive blocks that let you build rich documentation, enhance your workflows, and bring your repository to life.

GitHub Business Card
An online tool to generate an embeddable virtual business card from a GitHub user name that populates from the user's GitHub activity.

HighFlux
A next-generation Git client for the remote work era that includes a CLI and GUI.

La Terminal
SSH client that provides a fully-native, first-class touch experience for command-line hackers on iPhone and iPad.

Commercial Apps and Classifieds

A Tweet for Thought

This is easily my favourite GitHub Copilot joke so far. Certainly some truth to it, though I would imagine some took exception to the implication.
   

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 into astronomy, you might want to check out Stellarium, an open source "planetarium for your computer" that shows a realistic sky in 3D, just as what you would see with the naked eye, binoculars, or a telescope.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly