Web Tools Weekly
Tools for Web Developers

Issue #538  (Promise Concurrency, JS Utils, JSON/DB, Uncats)11/09/23


Advertisement

Rapidly Create Custom Browser Mods
Stop creating yet another screen. PixieBrix is the first low-code platform to add AI, automation, and integrations to the web apps your teams already use. PixieBrix Browser Extension technology gives you the power to modify any web interface.

PixieBrix

No more recompiling or reloading — the point-and-click Page Editor provides instant feedback. PixieBrix comes with hundreds of pre-made bricks to extract, collect, transform, integrate, automate, modify, and display your data and applications. Or, create your own.

Try for Free →

At this point you might already be familiar with the basics of JavaScript Promises. One specific area of Promises that has a few aspects to it is something called Promise concurrency. This comprises four different methods to facilitate concurrent (i.e. overlapping) tasks.

Here's a brief description of each one with some code examples:

Promise.all()
This is probably the most well-known of these methods. This method takes an iterable of Promises and returns a single Promise. It fulfills when all of the promises fulfill and rejects when any of the promises rejects.

const p1 = Promise.resolve(5);
const p2 = 33;
const p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'Some text...');
});

Promise.all([p1, p2, p3]).then((values) => {
  console.log(values);
});

// Log: [5,33,"Some text..."]

The above example fulfills the single returned Promise because all three of the Promises passed into it are fulfilled.

Promise.allSettled()
This method similarly takes an iterable of Promises and returns a single Promise. But in this case it fulfills when all the Promises settle (which could be either fulfilled or rejected).

const p4 = Promise.resolve(9);
const p5 = new Promise((resolve, reject) =>
  setTimeout(reject, 4000, 'Some text...'),
);

const promises = [p4, p5];

Promise.allSettled(promises).then((results) =>
  results.forEach((result) => console.log(result.status)),
);

// Log: "fullfilled"
// Log: "rejected"

In this case one of the Promises is rejected but the Promise is still fulfilled.

Promise.any()
This method again takes an iterable of Promises and returns a single Promise. It fulfills when any of the promises fulfills and rejects when all of the promises reject.

const p6 = Promise.reject(0);
const p7 = new Promise((resolve) => setTimeout(resolve, 6000, '1st'));
const p8 = new Promise((resolve) => setTimeout(resolve, 7000, '2nd'));

const promises2 = [p6, p7, p8];
Promise.any(promises2).then((value) => console.log(value));

// Log: "1st"

The log produces only the second Promise because the returned Promise for the any() method has already fulfilled once it finds one that fulfills.

Promise.race()
This last method again takes an iterable of promises and returns a single Promise that (as the name implies) settles once the first Promise settles (i.e. either fulfills or rejects).

const p9 = new Promise((resolve, reject) => {
  setTimeout(resolve, 9000, 'Initial');
});

const p10 = new Promise((resolve, reject) => {
  setTimeout(resolve, 8000, 'Secondary');
});

Promise.race([p9, p10]).then((value) => {
  console.log(value);
});

// Log: "Secondary"

In the above example, the "Secondary" text is the only one that logs because it 'gets there first' (that is, it wins the "race").

That's concurrency methods in a nutshell. You can view all the above examples in this CodePen. Try messing around with the different values to see how the code responds for the different methods.

Now on to this week's tools!

JavaScript Utilities

AuthKit
An interactive builder you can use to build an authentication solution using Stytch's JS/React SDK for easily embedding authentication into your apps.

Shadow
A new novel web engine made (almost) entirely in JavaScript from scratch that uses Canvas for rendering.

Your Browser Mod Factory
Stop creating yet another screen. PixieBrix is the first low-code platform to add automation, integrations, collaboration, and AI to the web apps your teams already use.     SPONSORED 

Glob
A highly-accurate and fast glob implementation (i.e. using * as a wildcard) in JavaScript.

csv42
A modular, small, and fast CSV parser with support for nested JSON and can convert to and from CSV/JSON.

SMOB
A zero dependency library to safely merge objects and arrays with customizable behavior.

Lobe Chat
An open-source, extensible, high-performance chatbot framework that supports one-click free deployment of your private ChatGPT/LLM web application.

Lobe Chat

Banditypes
A 400-byte schema validator for TypeScript and JavaScript, to check if data conforms to a TS type at runtime.

EasyCaptchaJS
A lightweight and user-friendly JavaScript library that simplifies the integration of Google reCAPTCHA API into web pages, with an optional jQuery plugin.

Waiter and AUTRATAC
A utility and Babel plugin that allow delaying JavaScript code execution to address unused code for better performance.

CopyShareify-js
A versatile JavaScript library that enhances buttons with customizable actions like copying strings, HTML elements, and images to the clipboard, for use with sharing buttons or similar functionality.
 

JSON Tools, Databases, etc.

Instant.dev
AS toolkit for building type-safe web APIs with JavaScript and Postgres. It enables the rapid development, testing, and deployment of APIs with minimal configuration.

JSON Viewer
An online JSON viewer that lets you minify, beautify, and load JSON from a file or copy/paste into the app in the text view. You can also use the visual view to see data types, object size, or download to a JSON file.

JSON Viewer

denodata
A Deno native indexed database backed by the Deno KV store and has zero external dependencies.

stark-db
An SQLite-backed, change-tracking database available over HTTP.

Dbmate
A Go-based database migration tool to keep your database schema in sync across multiple developers and your production servers.

The Smartest Use of Screentime Yet
With thousands of bite-sized lessons in math, data science, and CS, available on any device, Brilliant allows you to level up in just minutes a day. Make your free time count. Join over 10 million learners worldwide.    SPONSORED 

RDB
An Object Relational Mapper (ORM) for Node.js and Typescript, offering seamless integration with popular databases like Postgres, MS SQL, MySQL, Sybase SAP, and SQLite.

Neboa
A simple and powerful type-safe NoSQL database library for Node.js built on top of SQLite and better-sqlite3 (a SQLite3 Node.js library).

JSON Data AI
A service that allows you to create custom JSON endpoints via an AI-based text prompt (e.g. "List of best selling books in 2017"). Requires signup for more than two requests per day.

Hydra
An open source, column-oriented Postgres. Query billions of rows instantly on Postgres without code changes giving you parallelized analytics in minutes, not weeks.
 

The Uncategorizables

OpenSign
A free and open-source alternative to e-signing services like DocuSign, PandaDoc, SignNow, Adobe Sign, etc.

AI Emojis
Use a text prompt to generate a custom emoji for just about anything. For example a simple animal or even a celebrity or other character.

AI Emojis

Ruffle
An Adobe Flash Player emulator written in Rust that targets both desktop and web using WebAssembly.

The Smartest Use of Screentime Yet
With thousands of bite-sized lessons in math, data science, and CS, available on any device, Brilliant allows you to level up in just minutes a day. Make your free time count. Join over 10 million learners worldwide.    SPONSORED 

Qwant
An alternative privacy-first search engine (with an optional browser extension) that doesn't know anything about you, has no ad tracking, and doesn't sell your personal data.

Amarkdown
A modern Markdown editor for writers that features cloud storage, sharing, AI-based writing assistance, a no-code website builder, and more.

Lottielab
A motion design tool to create and edit Lottie animations and ship to your apps and websites. Free while in beta.

OpenObserve
A cloud native observability platform built specifically for logs, metrics, traces and analytics designed to work at petabyte scale.

Weavely
An AI-based form builder that lets you design forms in Figma and publish and collect responses. Free while in beta.

Mixpost
An open-source solution to easily create, schedule, publish, and manage social media content in one place, with no limits or monthly subscription fees.
 

Commercial Apps and Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Descope – No-code builder to add authentication and identity management to your B2C apps.
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs.    AD 
Base Analytics – A privacy-friendly
Google Analytics alternative compliant with GDPR, CCPA, etc.
Outerbase – AI-powered database platform for viewing, querying, visualizing, and editing your data.
JavaScript E-Books – 250+ tips, tricks, and little-known facts, with lots of live code demos.     AD 
Table Backend – A small backend solution as an alternative to Airtable, GSheets, Notion,  etc.
fastdbaccess – A simple way to create a database and use an API to perform CRUD operations.

An X Post for Thought

The owner of a programming memes account asks his followers how many monitors they use. An interesting question as it definitely depends on the kind of programmer you are and what types of things you're building.
 
An X Post for Thought
 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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 like to find free recipes online but can't stand how hard it is to find a recipe in the midst of all the ads, filler content, and other unnecessary junk, you'll want to check out JustTheRecipe. Enter a recipe URL and you'll get, well, just the recipe!

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris