Web Tools Weekly Issue #497 (Declarative, JS Utils, Git/CLI, Uncats)

Issue #497 (Declarative, JS Utils, Git/CLI, Uncats)01/26/23

When I come across different JavaScript libraries, frameworks, and other tools, many of them are described as having a "declarative API". This is something that's used to describe UI libraries like React and Vue.

Of course, if you don't understand programming concepts, the word "declarative" can feel a bit foreign at first. OK so it's declarative. What is that in contrast with? Simply put, declarative code contrasts with imperative code.

The following points might help make clear the difference between the two concepts:

Imperative programming is concerned with how something is done (control flow, logic trees, etc.)
Declarative programming is concerned with what gets done (the end result, which often involves high-level functions and methods)

HTML and SQL would be considered declarative languages. These "languages" get right to the point: They state exactly what needs to be seen or shown in the program. Languages like C and Java (and often JavaScript) would be considered imperative because they're dealing with lower-level code.

JavaScript can be either declarative or imperative. React, as mentioned, is declarative. It's only concerned with high-level methods and features. jQuery would be another example of a declarative library. The code that forms the logic behind features in those libraries, of course, is plain JavaScript. That would more or less amount to imperative programming.

Similarly, raw JavaScript features like Array.map(), Array.reduce(), and so on, are declarative. They're concerned mainly with what gets done (i.e. map this, reduce this, etc.). The following code would be more along the lines of an imperative programming example in JavaScript:

// Imperative code example

      function addNums (arr) {

        let myNum = 0;

        arr.forEach(function (item, index) {

          myNum += item;

        });

        return myNum;

      }

      console.log(addNums([5, 6, 7])); // 18

The above function adds together an array of numbers. This doesn't use any special JavaScript methods other than forEach(), so it's pretty raw and not the greatest code. You can see all the steps the code is taking if you walk through it.

Now compare that to the following example, which is considered more declarative:

// Declarative code example

      function addNums(arr) {

        return arr.reduce((total, item) => total + item, 0);

      }

      console.log(addNums([8, 9, 10])); // 27

This is much simpler code, using Array.reduce(), which does in a more declarative way what the previous snippet did. Try both examples in this CodePen.

DOM manipulation is also declarative. Its main concern is the end results: Grab a child element, collect some nodes, replace an element, etc. Whatever happens behind the scenes to get those tasks done isn't our concern when using a declarative API like the DOM.

So if you see a library or other tool boasting that it's 'declarative' – that's a good thing! It will be easy to understand, it will have a familiar and easy-to-grasp API, and you won't have to deal with flow control and other stuff that just gets done for you behind the scenes.

Now on to this week's tools!

JavaScript Utilities

The Fast Way for Developers to Build Mobile Apps
Build native iOS and Android apps with no mobile expertise—all you need is JS and SQL. Retool Mobile is the fast way for developers to build business apps for teams on the go, at a warehouse, or in the field. Teams of up to 5 can build for free. SPONSORED

moize
A fast memoization library that handles multiple parameters (including default values) without additional configuration, and can satisfy any number of potential use-cases.

Termino.js
A dependency-free JavaScript component that lets you add embedded terminal animations, games, and apps to web pages.

LogT
A small utility to add colors and animated GIFs to log output in the browser console, along with the ability to override default console commands.

Colord
A tiny and powerful JavaScript tool for high-performance color manipulations and conversions. The on-page demo interactively shows you what's possible when inputting a random color value.

Lazy Brush
JavaScript library to draw smooth curves and straight lines with your mouse, finger, or any pointing device.

Structura.js
Fast and lightweight Typescript library, similar to Immer.js, that allows you to create immutable states with a mutable syntax, based on the idea of structural sharing.

Remeda
A "data-first" and "data-last" utility library designed especially for TypeScript, as a better alternative to similar libraries like Ramda and Lodash.

wa-tunnel
A utility powered by Baileys (the WhatsApp JS API) that lets you tunnel internet traffic through two WhatsApp accounts.

Highlightable Input
A simple yet fully styleable text field that will automatically add customizable highlighting to at-mentions and hash tags.

tmsg
A truly type-safe internationalization library for TypeScript that includes a CLI to automatically find strings to translate in your code.

ipvfs
A utility to create and manage diff versioned files in an IPFS Mutable File System store.

Git, GitHub, and CLI Tools

Skyflow: What If Privacy Had an API?
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy. SPONSORED

GPTDuck
Input a GitHub repository then type a question for info on the repo, and the tool will use ChatGPT to provide info.

hiSHtory
A better shell history that stores your shell history in context (what directory you ran the command in, whether it succeeded or failed, how long it took, etc).

LGTM Alternative Suggestions
A Chrome extension that shows alternative suggestions when the text 'LGTM' (i.e. "Looks good to me") is entered in a GitHub pull request.

ov
A feature-rich terminal-based text viewer, also referred to as a terminal pager, written in Go.

sd
A script directory shell program that lets you organize your scripts in a logical directory hierarchy.

wrangler
A command line tool for building Cloudflare Workers.

Hey, GitHub!
Currently in technical preview, a GitHub-based service to use your voice to code without spelling things out by talking with GitHub Copilot.

VHS
A Go-based tool to write terminal GIFs as code for integration testing and demoing your CLI tools.

Modern Unix
A collection of modern, faster, saner, etc., alternatives to common Unix commands.

giget
A CLI utility to streamline downloading templates and Git repositories with support for GitHub, GitLab, Bitbucket, and Sourcehut, and includes a built-in template registry.

The Uncategorizables

Skyflow: What If Privacy Had an API?
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy. SPONSORED

Pingvin Share
A self-hosted file sharing platform and an alternative to WeTransfer, with no file size limit, expiration dates, email recipients, and more.

ezy
A full-featured desktop GUI client for gRPC/gRPC-Web.

D2 Playground
An online playground to experiment, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.

1Tools
A huge collection of online tools and utilities for everyday needs covering categories for development, images, social media, audio/video, text, PDF, domains, charts, and lots more.

RegexGo
An easy-to-use, AI-powered regular expressions generator. Type what the RegEx should/shouldn't match and it will generate the result.

Znote
A native JavaScript and Markdown-based app for prototyping, organizing, and exploring ideas and code snippets.

ApiScout
A powerful and flexible macOS REST API client for modern software teams.

Pirate Weather
A free, open, and documented weather forecast API that aims to return data using the same JSON structure as Dark Sky, the popular weather API.

Inngest
An open-source, event-driven platform that makes it easy for developers to build, test, and deploy serverless functions without worrying about infrastructure, queues, or stateful services.

APITable
An API-oriented and easy-to-use visual database for everyone, as an open-source alternative to Airtable.

Kubero
A free Heroku PaaS alternative for Kubernetes that provides a native solution that doesn't require any external dependencies.

FreeSubtitles.AI
An online tool with a user-friendly UI to generate transcripts for audio and video content, with 300MB file size and 1 hour duration limits.

Commercial Apps and Classifieds

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

Documentation Page – Gorgeous documentation for your projects, generated from your GitHub files.

Abakus – Bookkeeping, accounting, and consulting services for small businesses and freelancers. AD

ScrapeUp – Real-time proxy API for web scraping to get the HTML from any page with a simple API call.

PaidLink.to – Create a simple monetized paywall to protect access to your digital goods.

Product Teacher – A free weekly newsletter with articles and essays on product management. AD

instaprice – A service pricing calculator for freelancers to make sure they charge correctly.

Scout – Application performance monitoring built for developers, by developers.

A Tweet for Thought

A pretty accurate statement about hiring that would likely have been true even 20 years ago.

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

If you miss the good ol' days where everything was an online directory or a webring, you might like ooh.directory, a categorized old-school-like collection of more than 1,300 blogs covering just about any topic.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris