Issue #504 (AbortController, Frameworks, Build Tools, JS Utils)03/16/23
Let's take a quick look at the AbortController API, a relatively new feature in the DOM spec that allows you to cancel asynchronous tasks that are in progress. The main parts of the API are the AbortController() constructor, the signal property, and the abort() method.
I can mimic an asynchronous action by simply creating a Promise that resolves after a set timer. The basic framework of code for this might look something like the following:
|
// Create the controller
const controller = new AbortController(),
signal = controller.signal;
const promise = new Promise((resolve, reject) => {
// Start async action
const timer = setTimeout(() => {
resolve('Timer has completed!');
}, 5000);
// Listen for abort
signal.addEventListener('abort', () => {
clearTimeout(timer);
// Result if aborted
console.log("Timer was aborted!");
});
});
// Result if not aborted
promise.then(result => console.log(result));
// Abort it
controller.abort();
|
To make it easier to understand, the above code is somewhat brief, so it's not very practical. For example, the controller is immediately aborted but that's not normally what you'd want.
A more realistic example can be found in this CodePen demo. There I'm allowing the user to initiate the timer using a button. Then the timer can be stopped (i.e. the controller is aborted) with another button. This mimics what might take place dynamically in the process of a real app. In the demo, if you abort the timer, you'll have to refresh the page to reset it because a Promise cannot be reset once it's resolved.
The AbortController API can be incorporated in a number of practical ways in order to stop certain actions on the page from continuing, maybe for performance reasons or something else. Some examples:
- Cancel a network request when the user navigates away from a page.
- Disable animations when the user scrolls so that that animated portion of the page is no longer visible.
- Large resources on a page (like images or videos) can be cancelled if they are still in the process of loading but aren't needed anymore. MDN's article on the subject includes a live demo with a cancellable video.
I'm sure you can come up with other examples along the same lines, but you get the gist of its use and how it might come in handy to make pages perform better and provide a better overall experience.
Now on to this week's tools!
|
Web Frameworks
Kobalte
A UI toolkit for building accessible web apps and design systems with SolidJS that provides a set of low-level UI components and primitives that can be the foundation for your design system implementation.
NextBase Lite
A simple but very opinionated Next.js 13 + Supabase boilerplate, built with TypeScript, Tailwind, ESLint, Prettier, Husky, React Query, and much more.
Camome UI
A lightweight and accessible UI framework for React and CSS that enables you to build various styles of components without run-time JavaScript by fully utilizing the power of CSS.
CodiumAI. Generating Meaningful Tests for Busy Devs.
With CodiumAI, you get non-trivial tests (and trivial, too!) suggested right inside your IDE, so you can code smart, create more value, and stay confident when you push. By analyzing your code, docstring, and comments, and by interacting with you, TestGPT (by CodiumAI) suggests tests as you code. All you have to do is accept and commit them. SPONSORED
DecaUI
A large suite of React components that are themeable, accessible, include built-in dark mode, and built with Stitches, the CSS-in-JS solution.
React Pro Boilerplate
A React and Next.js boilerplate that also includes TypeScript support, Prettier, and ESLint.
Flowbite-Svelte
An official Flowbite component library for Svelte that includes 30+ components, form controls, typography features, and more.
 |
AstroWind
An open-source template for building projects with Astro 2.0 and Tailwind featuring production-ready Lighthouse scores and SEO-ready content and image optimization, and lots more.
Practica.js
Generate a Node.js app that's packed with best practices and simplicity, based on the popular Node.js Best Practices GitHub repo.
Tiny Vue 3 Template
A small template for building Vue projects with no build step, but instead using Vue through a CDN.
shadcn/ui
30+ beautifully designed components, built with Radix UI and Tailwind, that are accessible and customizable and can be used to create your own component library.
|
Build Tools, Bundlers, etc.
Bob
A high-level build tool for microservices, for multi-language projects, to build codebases organized in multiple repositories or in a monorepo.
stale-dep
A CLI tool to check if your node_modules folder is stale compared to the last time you checked.
Typewind
A Babel-based build solution that brings the safety, productivity, and IntelliSense of TypeScript to Tailwind projects with zero bundle size.
Don’t Just Read The News—Make The News
Looking for an edge in business? Look no further than The Information. Their team of award-winning journalists provide exclusive insights into tech and finance, with original reporting, big interviews, and more that you won’t find anywhere else. Subscribe now and save 25%. SPONSORED
pacote
An npm fetcher that fetches package manifests and tarballs from the npm registry.
vite-plugin-checker
A Vite plugin that adds Worker-based checks for TypeScript, ESLint, vue-tsc, Stylelint and more.
depngn
Short for "dependency engine", a CLI tool to find out if your dependencies support a given version of Node.
Remix Compute
A Remix adapter and server runtime for Netlify that allows you to deploy your Remix apps to Netlify Edge Functions.
publint
An online tool that lints npm packages for packaging errors, ensuring maximum compatibility across environments (e.g. Vite, Webpack, Rollup, Node.js, etc).
 |
genzo
A Node-based CLI tool to scaffold your projects for development with custom templates from GitHub or your local file system.
vite-plugin-react-swc
A plugin for Vite that enables SWC (the Rust-based build tool) on your dev server with faster refresh and automatic JSX runtime enabled.
Scriptful
An enhancement for package.json scripts that allows you to run multiple scripts at once and reuse them.
|
JavaScript Utilities
Constrain
A library for animated, interactive web figures (e.g. interactive pythagorean theorem, computing the golden ratio, etc.) based on declarative constraint solving.
MiniSearch
A tiny but powerful in-memory full-text search engine written that's respectful of resources and can comfortably run both in Node and the browser.
ScrollyVideo.js
Responsive scrollable videos without obscure video encoding requirements, compatible with React, Svelte, Vue, and plain HTML/JS.
validator.js
A library of string validators and sanitizers that includes about 100 different utilities (e.g isCreditCard, isCurrency, isEmpty, isISBN, and lots more).
Don’t Just Read The News—Make The News
Looking for an edge in business? Look no further than The Information. Their team of award-winning journalists provide exclusive insights into tech and finance, with original reporting, big interviews, and more that you won’t find anywhere else. Subscribe now and save 25%. SPONSORED
Lenis
A lightweight smooth effects-on-scroll plugin that's accessible and incorporates features for CSS sticky and IntersectionObserver.
BoxSlider
A small dependency-free library that provides a lightweight, responsive content slider with various slide transition effects for modern browsers. The demo page is pretty impressive!
 |
html2svg
Convert HTML and Canvas to vector (SVG, PDF) or bitmap (PNG, JPEG, WebP) images using Chromium.
URL Animations
A small library to add loading animations to a website in the browser's address bar. Not for every project, but includes a gallery of examples to check out.
BalanceText
A utility to provide an alternate text wrapping algorithm to ensure that text is rendered so that the amount of text on each line is about the same.
Idiomorph
A JavaScript library for morphing one DOM tree into another, inspired by a couple of other older similar solutions.
Authey
Expose Auth.js REST APIs to any Node.js framework compatible with Connect, the Node.js middleware layer.
|
|
Commercial Apps and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
Internal – An all-in-one internal tools platform with database, API, or Google Sheets integration.
|
|
JS E-Books Bundle – All my JS and DOM scripting tips bundled into an affordable e-books package. AD
|
Browserbear – Easily automate any browser task like testing websites, capturing data and more
|
|
Stellate – A fast and reliable GraphQL API with edge caching, metrics, and rate limiting, to help reduce server and database load.
|
Tech Brew – A 3-times-a-week newsletter with the latest tech news impacting you and your future. AD
|
|
JamComments – A Disqus alternative for static sites that's SEO-friendly and ad-free.
|
Squash – A batch photo editor for Mac to quickly batch convert and resize images, add watermarks, etc.
|
|
|
A Tweet for Thought
Here's a short but informative Tweet thread from Todd Motto where he offers a few lessons on understanding certain concepts in JavaScript.
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...
Someone decided to make FlappyBirdle, the most frustrating game in the history of everything. I'm so angry I can't even talk right now.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
