Issue #488 (copyWithin(), JS Utils, JSON/DB, Uncats)
|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!
Get a Quick Demo!
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:
console.log([1, 2, 3, 4, 5, 6].copyWithin(3));
console.log([1, 2, 3, 4, 5, 6].copyWithin(3, 0, 2));
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));
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.
Now on to this week's tools!
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
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.
A fast query string parser and stringifier to replace the legacy node:querystring module.
A framework-agnostic state management library with a Recoil-inspired AP, designed for simplicity and scalability.
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.
A type-safe router with built-in caching and URL state management for JS/TS, React, Preact, Solid, Vue, Svelte, and Angular.
A set of lightweight multi-framework libraries for draggability on the web.
A component for Framer that uses Highlight.js and allows you to add code snippets to your pages.
A Node.js module for generating favicons and their associated files, originally built for the old Web Starter Kit boilerplate by Google.
A utility to extract one or more random elements from a weighted array.
JSON Tools, Databases, etc.
Black Friday Sale: React for Beginners
An open-source CLI to use SQL to instantly query your cloud services (AWS, Azure, GCP and more), no database required.
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.
An online tool that uses the Google Translate API to translate JSON data to a chosen language, for use in i18next, the internationalization framework.
An ESLint plugin for writing SQL queries in a type-safe way, compatible with popular SQL libraries.
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.
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.
An easy-to-use, lightweight, distributed relational database that uses SQLite as its storage engine.
An online JSON editor to seamlessly visualize your JSON data instantly into graphs. Also available as a VS Code extension and native app.
A fast and lightweight interactive terminal based UI client for PostgreSQL, MySQL, and SQLite3, written in Go and works on OSX, Linux, and Windows.
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.
Black Friday Sale: Advanced React
A Go-based next-generation, fast, configurable, crawling, and spidering framework.
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.
A Figma plugin that uses AI to name your Figma layers automatically.
An open source, cross-channel customer messaging platform that you can self host.
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.
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.
A WHOIS client for Node.js that helps with querying WHOIS servers for TLDs, domain names, AS numbers, and IPs.
Commercial Apps and Classifieds
|These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
– A collaborative SQL editor to write queries, visualize data, and share your results.
– A lightweight desktop client for Kubernetes, to manage workloads on multiple clusters.
– A language learning platform trusted by over 10 million subscribers worldwide. AD
– Get access to aggregated career-enhancing resources from top brands. AD
– Scheduled snapshots for servers, databases, and applications on all providers.
– A widget to give users actions, support content, powerful search, and more.
– 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!