Web Tools Weekly Issue #488 (copyWithin(), JS Utils, JSON/DB, Uncats)

Issue #488 (copyWithin(), JS Utils, JSON/DB, Uncats)11/24/22

A lesser-known but useful little array method you might want to take note of is the Array.copyWithin() method, which has excellent browser support. This method allows you to copy a portion of an array to another part of the same array.

The method takes up to three arguments:

target - An integer representing the index in the array where you want the copied portion to end up. A negative value starts counting from the end of the array. Defaults to zero if omitted.
start – Optional integer representing the index in the array where you want to start copying within the array. Default is zero.
end – Optional integer representing the index where the copied portion will end (but not including the "end" index).

Here are some examples:

// [1,2,3,1,2,3]

      console.log([1, 2, 3, 4, 5, 6].copyWithin(3));

      // [1,2,3,1,2,6]

      console.log([1, 2, 3, 4, 5, 6].copyWithin(3, 0, 2));

      // [1,5,6,4,5,6]

      console.log([1, 2, 3, 4, 5, 6].copyWithin(1, 4));

      // No change, target is higher than array's last index

      console.log([1, 2, 3, 4, 5, 6].copyWithin(6, 0, 2));

      // [1,,undefined,4,,undefined]

      console.log([1, , undefined, 4, 5, 6].copyWithin(4, 1));

Try it on CodePen

As you can see, I'm using the method directly on each array. I wouldn't normally do this, but for demo purposes it's helpful because the copyWithin() method mutates the original array.

Some other things to keep in mind when using this method:

If you're familiar with C and C++'s memmove function, this works similarly.
Notice in the last example above, I'm copying a portion of an array that has an empty slot and a value of undefined. This is to demonstrate that copyWithin() preserves these during its operation.
copyWithin() doesn't affect the length of the array, even if the portion being copied is theoretically adding to the end of the array.

Probably the only annoying part of using this method is the fact that it won't copy up to the end value (the optional third argument). A few JavaScript methods have that same behaviour, so it's something to take note of.

Now on to this week's tools!

JavaScript Utilities

Hey Devs, Meet TelemetryHub!
TelemetryHub is an observability tool that collects all your complex telemetry data into a single pane of glass view by leveraging the power of OpenTelemetry. Get optimal transparency into your distributed system without per-seat pricing! SPONSORED

IP Index
A fast offline IP lookup library that's a self-sufficient web service providing info about an IP, particularly its ASN, country of origin, and whether it's hosting or not.

fast-querystring
A fast query string parser and stringifier to replace the legacy node:querystring module.

xoid
A framework-agnostic state management library with a Recoil-inspired AP, designed for simplicity and scalability.

Viselect
A dependency-free, high-performance, and lightweight library to add a visual way to select elements, similar to selecting on your Desktop, with integrations for most major JS frameworks.

TanStack Router
A type-safe router with built-in caching and URL state management for JS/TS, React, Preact, Solid, Vue, Svelte, and Angular.

neodrag
A set of lightweight multi-framework libraries for draggability on the web.

Syntax
A component for Framer that uses Highlight.js and allows you to add code snippets to your pages.

Multiple-Uploader.js
A pure JavaScript library that lets you add a multi-image file uploader to a page, with real-time previews.

Favicons
A Node.js module for generating favicons and their associated files, originally built for the old Web Starter Kit boilerplate by Google.

Slash
A collection of 30+ TypeScript/JavaScript packages that can serve as a foundation to provide high quality web services.

wrand
A utility to extract one or more random elements from a weighted array.

JSON Tools, Databases, etc.

Black Friday Sale: React for Beginners
Wes Bos is having his annual half-price sale for all his web development courses, including Advanced React, Beginner JavaScript, and ES6 for Everyone. SPONSORED

Steampipe
An open-source CLI to use SQL to instantly query your cloud services (AWS, Azure, GCP and more), no database required.

Flyweight
An ORM for SQLite and Node that combines a simple API for performing basic operations, with the ability to create SQL queries that are typed and automatically mapped to complex object types.

Translate i18next
An online tool that uses the Google Translate API to translate JSON data to a chosen language, for use in i18next, the internationalization framework.

js2xmlparser
A Node.js module for parsing JavaScript objects into XML, designed primarily for JSON-type objects, arrays, and primitive data types.

SafeQL
An ESLint plugin for writing SQL queries in a type-safe way, compatible with popular SQL libraries.

Kanel
Generate TypeScript types from a live Postgres database, for people who don't like ORMs but who like Intellisense and type checking for their database access code.

Xata
A serverless database with built-in powerful search and analytics, one API, multiple type-safe client libraries, optimized for your development workflow, and has a decent free plan.

rqlite
An easy-to-use, lightweight, distributed relational database that uses SQLite as its storage engine.

JSON Crack
An online JSON editor to seamlessly visualize your JSON data instantly into graphs. Also available as a VS Code extension and native app.

dblab
A fast and lightweight interactive terminal based UI client for PostgreSQL, MySQL, and SQLite3, written in Go and works on OSX, Linux, and Windows.

dangoDB
A lightweight MongoDB Object Document Mapper (ODM) built for Deno that provides the core functionality and familiar look and feel of established Node-based libraries for the Deno runtime.

The Uncategorizables

Black Friday Sale: Advanced React
Wes Bos is having his annual half-price sale for all his web development courses, including React for Beginners, Beginner JavaScript, and ES6 for Everyone. SPONSORED

Katana
A Go-based next-generation, fast, configurable, crawling, and spidering framework.

Answer
An open-source knowledge-based community software you can use to quickly build a Q&A community for product technical support, customer support, user communication, and more.

Mona & Hubot Sans
A pair of beautiful variable fonts from the team at GitHub.

Random User Generator
An open-source API for generating random user data in JSON, CSV, YAML, or XML formats.

Figma Autoname
A Figma plugin that uses AI to name your Figma layers automatically.

Laudspeaker
An open source, cross-channel customer messaging platform that you can self host.

macapps.link
An online tool that generates a terminal command for Mac users who want to quickly choose and install all their apps on a new device.

Ninite
The Windows equivalent of the previous tool. Choose what apps you want to install for a new device, and this tool will generate a custom installer you can run.

Whoiser
A WHOIS client for Node.js that helps with querying WHOIS servers for TLDs, domain names, AS numbers, and IPs.

Happy DOM
A JavaScript implementation of a web browser without its graphical user interface that includes many web standards from WHATWG DOM and HTML.

Commercial Apps and Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!

PopSQL – A collaborative SQL editor to write queries, visualize data, and share your results.

Aptakube – A lightweight desktop client for Kubernetes, to manage workloads on multiple clusters.

JavaScript E-Books – 250+ tips, tricks, and little-known facts, with lots of live code demos. AD

SnapShooter – Scheduled snapshots for servers, databases, and applications on all providers.

CommandBar – A widget to give users actions, support content, powerful search, and more.

AskEdith – A natural language
interface for databases to translate English to SQL.

A Tweet for Thought

I really like this comparison of a bad error message vs. a good error message. If I'd seen the bad one alone, I don't think I would have picked out the problems. The actual source is from Jenni Nadler (the Tweet author mentions this in a follow-up Tweet, with a link).

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

summarize.tech is an online tool that generates AI-powered summaries of YouTube videos. Might be helpful for doing research if you don't want to spend the time watching a full video. And it provides timestamps of the summary points which is handy for longer videos.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris