Issue #513  (Building Libs, Media, JS Utils, Uncats)05/18/23

Every few weeks there's a good JavaScript article that makes the rounds on various platforms and garners a lot of discussion.  A recent example is Building a Frontend Framework; Reactivity and Composability With Zero Dependencies by someone named Alan (he doesn't seem to provide his last name on his socials and whatnot).

The article is definitely not for JavaScript beginners, but it's a really good foray into some modern terminology, techniques, and features that you may not have had the opportunity to use yet in real projects.

A bullet summary of the lesser-known and well-known topics he covers (albeit briefly) in the approximately 1500-word post:

• Reactivity
• Composability
• JavaScript Proxy Objects
• Data Attributes
• Web Components
• HTML's <template> and <slot> Elements
• Shadow DOM

Media Tools (SVG, Images, Video, etc.)

Observable Plot
A JavaScript library for exploratory data visualization that allows you to create expressive SVG-based charts with concise code.

Picography
High-resolution, royalty-free stock photos, categorized and searchable and available under a CC0 license.

PeepsLab
An interactive tool to create your own "peep" (i.e. profile avatar). You can generate a random avatar or randomize the different parts of the "peep" (hair, face, body, etc).

Meet Your New Favorite Terminal ⚡
Warp is a Rust-based terminal that works like a modern app. Edit your commands like in an IDE, with selections, autosuggestions, and completion menus. Warp integrates with zsh, fish, bash, and requires zero config out of the box. Warp is completely free and available today on Mac.    SPONSORED 

Flectofy
An interactive tool to create a very specific kind of custom blob shape using rounded squares and rectangles, which you can download as PNG or SVG.

Unpic
An set of web components that allow you to embed images for just about any popular JavaScript library. Also includes some other utilities for placeholders, Open Graph, and more.

DPaint.js
A Web-based image editor, modeled after the legendary Deluxe Paint app from 1985, with a focus on retro Amiga file formats.

Segment Anything
A new AI model from Meta AI that can "cut out" any object, in any image, with a single click.

SVG Doodles
A free collection of 200+ graphics with a hand-drawn look, available in five different categories.

Iconhunt
An icon search engine with access150.000+ free, open source icons, downloadable for Notion, Figma, or just plain SVG.

Fast Average Color
A simple JavaScript/TypeScript library that calculates the average or dominant color of any image or video in a browser environment.

Techicons
SVG and PNG versions of tech logos for popular libraries, tools, technologies, etc.
 

JavaScript Utilities

WebGPT
An implementation of GPT inference, to run GPT models in the browser with the new WebGPU technology, in less than 1500 lines of vanilla JavaScript.

headless-qr
A simple, modern QR code generator. Adapted from an older project but without all the junk that was necessary 10 years ago.

Magicast
Programmatically modify JavaScript and TypeScript source code with a simplified, elegant and familiar syntax. Built on top of an AST parsed by recast and Babel.

set-timeout-manager
A simple utility for managing timeouts without having to manually track timeout IDs. Easily start and stop timeouts using a unique identifier.

TypeAPI
An OpenAPI alternative to describe REST APIs for type-safe code generation, to remove the need to develop custom client SDKs for REST APIs.

Securely Share 2FA Tokens With Others, No Phone Needed
A browser-based 2FA authenticator for you and your team. Easy import from Google Authenticator, user management, read-only access, backups, and more. 2FA your team will love!    SPONSORED 

Routemate
A JavaScript router with support for various environments such as Node.js, Deno, and Cloudflare Workers and configured similarly to Express.js but uses standard `Request`, `Response`, and `Headers` elements.

HOTScript
Higher-Order TypeScript. A library of composable functions for the type level, to transform your TypeScript types in any way you want using functions you already know.

Binary-parser
A parser builder for JavaScript that enables you to write efficient binary parsers in a simple and declarative manner.

Telefunc
A set of remote functions for a simple frontend-backend relationship so your frontend can directly use any SQL/ORM query to retrieve and mutate data.

Hundred
A "toy block" virtual DOM based on Million.js, and described as more of a proof-of-concept and learning resource and not necessarily to be used in production.

Alfaaz
A super-fast multilingual word counter that can count millions of words per second (up to 0.9 GB/s 100x faster than RegExp-based solutions)and has built-in support for CJK, Urdu, Arabic, and more.
 

The Uncategorizables

Graphy
A feature-rich online tool to create slick, interactive charts and graphs with custom data you can add to a table visually.

JavaFiddle
An online playground for testing out Java code that includes an output console.

Val Town
A social website to write and run code. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.

Maxi Blocks
A WordPress plugin that's a free page builder and a comprehensive library of pre-built templates, designer icons, and other innovative features.

Bite-sized Math and CS Lessons to Sharpen Your Analytical Thinking
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day.   SPONSORED 

Fixel
A free variable font (named after a cat) in two styles, text and display, with nine weight options ranging from thin to black.

PartyKit
An open-source platform for building collaborative applications, fully managed, deployed on the edge.

EqualTo Sheet Markup
A Markdown-inspired syntax for embedding spreadsheets in a markdown document, based on a service called EqualTo.

Mox
A modern full-featured open-source secure mail server, built with Go, for low-maintenance self-hosted email.

CodeGuide
An open-source tool for creating and viewing code guides, for onboarding, explaining the context of a code review, and more.

CloudShift
An open-source tool, built on RClone, for securely migrating data between cloud providers, with support for AWS S3, Microsoft Azure Storage, and Cloudflare R2.

Mullvad Browser
A privacy-focused web browser, developed in a collaboration between Mullvad VPN and the Tor Project, designed to minimize tracking and fingerprinting.

Commercial Apps and Classifieds

A Tweet for Thought

If you're a fan of the movie Finding Nemo, you might be a bigger fan after reading this thread by Joshua Bonhotal.
   

Send Me Your Tools!

Made something? Reply to this email or 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...

Here's a chess-inspired game called Ain't it funny how the knight moves? that I have zero patience for but maybe you'll like.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris