es-toolkit; intro.js; kuma

The heat dome has finally left New England! The grid held, too!

Today, we’re fairly heavily JS-focused, but the third resource doesn’t require any programming at all (so, if you’re not into JS, you should likely head down to that bit).

TL;DR

(This is an AI-generated summary of today’s Drop using Perplexity with the GPT-4o model.)

• es-toolkit: The es-toolkit is a modern JavaScript utility library that offers performance and size advantages over other libraries. It supports tree shaking and includes built-in TypeScript support. Key features include utilities for arrays, functions, math, objects, predicates, and promises, making it a versatile tool for JavaScript developers.
• intro.js: Intro.js is an open-source library designed to create step-by-step product tours and onboarding experiences. It is lightweight, with no external dependencies, and can be easily integrated into projects to guide users through application features. The library is available under the GNU AGPLv3 license, with commercial licenses also offered.
• kuma: Uptime Kuma is a self-hosted site/service monitoring tool that supports various monitoring types, including HTTP(s), TCP, and Docker containers. It features a fast, reactive UI, supports multiple notification services, and offers functionalities like multi-language support, status pages, and 2FA. It is a well-organized Vue app, suitable for learning complex front-end/back-end engineering.

es-toolkit

The es-toolkit (GH) is a modern JavaScript utility library designed to offer performance and size advantages over other libraries and even that of vanilla JavaScript (performance-wise). It supports tree shaking — a technique used to eliminate dead code from your bundle, which can further reduce the size of JavaScript files and improve load times — out of the box, and includes built-in TypeScript support with straightforward yet robust types (if you’re a TypeScript acolyte).

Some features (lifted from their site) include:

• Array: Utilities for array manipulation, such as uniq and difference.
• Function: Tools for controlling function execution, including debounce and throttle.
• Math: Numerical utilities like sum and round.
• Object: Tools for manipulating JavaScript objects, such as pick and omit.
• Predicate: Type guard functions like isNotNil.
• Promise: Asynchronous utilities like delay.

One function it has that I wish base R had is chunk:

import { chunk } from 'es-toolkit';

const array = [1, 2, 3, 4, 5, 6, 7, 8];
const chunkedArray = chunk(array, 3);
console.log(chunkedArray); // [[1, 2, 3], [4, 5, 6], [7, 8]]

(A combo of gl and split is required in base R.)

If you’re stuck inside over the weekend (perhaps, due to the heat), this might be a fun library to mess around with. Here’s a starter Observable Notebook that has the library loaded with some examples. Fork it to play with the rest of the functions without polluting your own system. While you’re at it, check out @toss/utils, which is a sibling package of utility functions which can be used in any environment, including React, Node.js, and Vanilla JS.

intro.js

I’m always a bit jealous of the web apps that have the “onboarding” stage where it walks you through the app features by focusing on and/or instrumenting the app itself. It seems like it’d be a ton of work to replicate that, but there are some libraries that can help. One of these is intro.js (GH)

This open-source library is designed to facilitate the creation of step-by-step product tours and human onboarding experiences. It’s pretty lightweight (10K), and does not require any external dependencies. The license is GNU AGPLv3 license, but they do sell commercial licenses offered for proprietary applications.

You literally just need to add intro.js and introjs.css to your project (or use via CDN) and add some instrumentation code, which will look something like this:

import introJs from 'intro.js';
import 'intro.js/introjs.css';

introJs().setOptions({
  steps: [
    {
      intro: "Welcome to our application!"
    },
    {
      element: document.querySelector('#login'),
      intro: "Click here to login!"
    },
    {
      element: document.querySelector('#dashboard'),
      intro: "This is your dashboard."
    }
  ]
}).start();

I’ll be giving this a go on a personal project during the all-company week-long break we have at the beginning of July.

kuma

Another tool I’ll be checking out over the upcoming work break is Uptime Kuma (GH). It’s a lightweight, container-ready, self-hosted site/service monitoring tool.

It features (scraped from their site):

• Monitoring uptime for HTTP(s) / TCP / HTTP(s) Keyword / HTTP(s) Json Query / Ping / DNS Record / Push / Steam Game Server / Docker Containers
• Fancy, Reactive, Fast UI/UX
• Notifications via Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP), and 90+ notification services, click here for the full list
• 20-second intervals
• Multi Languages
• Multiple status pages
• Map status pages to specific domains
• Ping chart
• Certificate info
• Proxy support
• !!! 2FA support !!!

It’s also a well-organized Vue app, so it’s a good place to start if you want to see how to engineer a fairly complex front-end/back-end app in JavaScript.

I’ll report back after I kick the tyres a bit.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️