Web Tools #454 - Array.at, React, Git/CLI, Uncats

Advertisement

JavaScript's list of Array methods has quietly added a method called Array.prototype.at(). This relatively new feature, now supported in all modern browsers, is a replacement for using square bracket notation for accessing specific elements in an array.

For example, if you wanted to access the 5th element in an array, you would do the following using square bracket notation:

Using Array.at(), you simply pass in an integer representing the array's index that you want to access:

Your first reaction might be that this is basically the same as the square bracket syntax, but a few more characters. But there is at least one extra perk with Array.at(): You can use negative values to access elements by index starting from the end of the array. Here's some code to show how this works:

Try it on CodePen

You can see that I twice accessed the last element in the array using a value of -1. The second time I did this was after I added an element to the end of the array.

This is much nicer than using square bracket notation with something like myArray[myArray.length - 1] or some other convoluted technique. The code above is much cleaner and easier to understand as long as you know what a negative value does in this context.

If you don't pass any value into Array.at(), it defaults to an index of 0. The method returns the element at the specified index and the original array is not affected. If the index doesn't exist, the method returns undefined.
 

Now on to this week's tools!
 

React Tools

Mojeek: A Crawler-Index Search Engine
Most alternative search engines just source results from Google or Bing, not Mojeek! We have a growing index of over 5 billion pages, and crawl the web using technology built in-house. Discover something different with Mojeek. sponsored  

Radish
A React-based static site generator that outputs plain HTML and CSS, has no runtime, lets you write in Markdown, and supports YAML, TOML, or JSON for data.

Fomir
A schema-first form library for React, with support for form building using markup.

Solito
A library dedicated to unifying React Native with Next.js, primarily focused on navigation.

react-super-responsive-table
A responsive React data table component that converts your table data to a user-friendly list in mobile view.

JARLE
A lightweight but feature-rich React component editor with live preview. Uses Sucrase, the Babel alternative, for fast, minimal compilation of JSX and/or Typescript.

Avvvatars
An open-source UI avatar placeholder library for React. Uses an `Avvvatars` component that outputs a random unique text or shape-based avatar.

Redux-Saga
A library that makes application side effects (i.e. asynchronous things like data fetching) easier to manage, more efficient to execute, easy to test, and better at handling failures.

react-tree-graph
A simple React component that renders data as a tree using SVG, with support for React 15.3 and up.

react-worker-components-plugin
A plugin that renders components in web workers and not in the main thread, which helps in rendering blocking components in a non-blocking way.

FireVerse
A full-feature messenger app clone built with React, Tailwind, and Firebase for auth and storage.

React Showroom
Generate documentation and live examples of React components by declaring props definitions and writing markdown.

Git, GitHub, and CLI Tools

Build Faster By Actually Using Your Components
Hot out the oven! Omlet is a zero-config component registry and monitoring platform for front-end teams to drive design system adoption. Uncover all your reusable and custom components with analytics and explore how they are used in your product. Get early access for free now.   sponsored 

scrt
A command-line secret manager built in Go that provides command-line users with a secure way of storing and retrieving secrets, while retaining control of the storage.

kitty
A fast, feature-rich, terminal emulator that offloads rendering to the GPU for lower system load and uses threaded rendering for minimal latency.

bearings
A fast, clean, customizable shell prompt that supports zsh, Bash, fish, and more, and has configuration via YAML.

Devmarks
A bookmarking service for developers that syncs GitHub stars, Pinboard, Hacker News favourites, and includes unlimited bookmarks in the free plan.
 
HUBFS
A file system for GitHub and Git. Git repositories and their contents are represented as regular directories and files and are accessible by any application.

cheat
Allows you to create and view interactive cheat sheets on the command-line.

Gitter
A chat and networking platform that helps to manage, grow, and connect communities through messaging, content, and discovery.

SponsorKit
Toolkit for generating sponsors images on your GitHub readme files to feature your backers.

Repo Tracker
Better GitHub repository stats and insights. Keep track of commits, issues, PRs, releases, etc., in multiple GitHub repositories
 

The Uncategorizables

Build Faster By Actually Using Your Components
Hot out the oven! Omlet is a zero-config component registry and monitoring platform for front-end teams to drive design system adoption. Uncover all your reusable and custom components with analytics and explore how they are used in your product. Get early access for free now.   sponsored 

Garage
An open-source distributed storage service you can self-host to fullfill many needs, downloadable as a Docker image.

OneModel
A diagramming tool for software engineers to build architecture diagrams, with other diagram types slated for future releases.

undici
An HTTP/1.1 client written from scratch for Node.js.

Kestra
An infinitely scalable orchestration and scheduling platform for Docker, for creating, running, scheduling, and monitoring millions of complex pipelines.
 
Open Source Design
A community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software.

Piwigo
Open source photo gallery software built with PHP, designed for organizations, teams, and individuals, with 200+ plugins and themes available.

Modern Data Stack
Everything you need to know about building and operating a modern data stack.

Papyrus
A web3 publishing and newsletter platform that's free with unlimited subscribers for newsletters that don't use paid subscriptions.

Modern
Chrome, Edge, or Firefox extension to enhance your Wikipedia experience with a beautiful, clean, modern design that's fully customizable.

Jam
Clubhouse-like audio rooms as a service that lets you add audio rooms to your website, web store, or app with support for WordPress, Webflow, Wix, Shopify, Slack, and React.

OpenSilver
A modern, plugin-free, open-source re-implementation of Microsoft Silverlight.

kafka-ui
Versatile, fast, and lightweight web UI for managing Apache Kafka clusters (a distributed event store and stream-processing platform).
 

Commercial Tools and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

Oh-heck – Generate terminal commands from natural language using GPT-3.

Svix – Webhooks service to build a state-of-the-art webhooks solution.

Bytes – A JavaScript newsletter that's informative and entertaining. ad 

bunny.net – A next-generation CDN, edge storage, and optimization service.

BLK Design System – A premium Bootstrap & React component library. ad 

SpinupWP – Your own extremely fast WordPress server, spun up in minutes.

Liveblocks – A set of APIs to create multiplayer experiences in minutes.
 

A Tweet for Thought

Speaking of GitHub... As a bathroom design this is hideous, but as an indication of open-source contributions...?

 

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

In case you didn't know, Pantone 448 C, with hex value #4A412A, is apparently the ugliest color in the world. Is it uglier than that bathroom in the Tweet though? It's close.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon  /  GitHub Sponsors  /  E-Books  /  $5 Tip  /  $1 Tip