Issue #526  (Fast DOM, React, Build Tools, Uncats)08/17/23

Over on Google's web.dev resource, Jeremy Wagner has written an important piece called How large DOM sizes affect interactivity, and what you can do about it. I say this is important because more and more projects today are no longer just simple websites. Apps are the norm now and many have huge amounts of HTML elements, meaning a large DOM that can potentially slow down a page.

The whole article is a worth a read for anyone working on app performance, but I'll just highlight and summarize a few things here that I liked:

• Generally speaking, the larger a DOM is, the more expensive it is to initially render that page and update its rendering later on in the page lifecycle.
• According to Lighthouse, a page's DOM size is excessive when it exceeds 1,400 nodes. Lighthouse will begin to throw warnings when a page's DOM exceeds 800 nodes.
• Large DOMs affect page performance in a few ways: During initial page render when the CSSOM is applied; when interactions modify the DOM; and when JS queries the DOM.
• To get the total number of HTML elements in the DOM, you can use document​.querySelectorAll('*')​.length in the browser's console (which counts only DOM elements, not DOM nodes).

One of the suggestions I thought was a good one to keep in mind is where he explains:

"You might be in a position where large parts of your page aren't initially visible to the user when it first renders. This could be an opportunity to lazy load HTML by omitting those parts of the DOM on startup, but add them in when the user interacts with the parts of the page that require the initially hidden aspects of the page."

And he also suggests using a new CSS property that now has decent browser support:

"CSS offers the content-visibility property, which is effectively a way to lazily render off-screen DOM elements. As the elements approach the viewport, they're rendered on demand."

You can read about content-visibility on MDN. A great article that's another step forward in helping the web be faster (which of course, benefits everyone).

Now on to this week's tools!
 

React Tools

react-tweet
Embed tweets in your React app when using Next.js, Create React App, Vite, and more.

React Content Font
Create custom Google Fonts from page content. Useful if you're developing React apps for languages like Japanese, and want to use non-system fonts.

Onboard AI: Q&A with any Repo
Onboard AI chat with any repo. Just drop in a GitHub link, wait a few minutes for Onboard to learn the entire repo, and you can ask questions to locate functionality, understand different parts, and generate code changes.     SPONSORED 

Vaul
An unstyled drawer (or bottom sheet) component for React that can be used as a dialog replacement on tablet and mobile devices.

uploadthing
A file upload component for Next.js and Solid.js that offers an easy way to add file uploads to your full-stack TypeScript application.

MDXEditor
An open-source React component that allows users to author Markdown documents naturally, just like in Google Docs or Notion.

Reactive
A concise, intuitive way of writing React applications with high performance, embracing a reactivity system, and mutations.

Zact
Meaning Zod Server ACTions, A package that makes Next.js Server Actions validated and type safe, so you can use them in things that aren't forms.

AutoFocusDOF
A component to make it easier when creating a scene using React Three Fiber with a post processing effect that has auto focus.

React Hook Form Resolvers
A set of resolvers for React Hook Form to allow you to use any external validation library such as Yup, Zod, Joi, Vest, Ajv, etc.

Mezze
A Figma plugin that allows you to convert and export icons as React components, and pushes changes directly to your GitHub repos.

On the Release Radar:

• Downshift – WAI-ARIA enabled components now at version 8+
• useHooks – Server-safe React hooks library now at version 2+
• Legend-State – State management library now at version 1+
• Unglitch – State management + caching now at version 2+
• UrbanBot – React chatbot library now at version version 1+

Build Tools, Bundlers, etc.

ESLint Plugin Perfectionist
An ESLint plugin that sets rules for sorting various data, such as objects, imports, TypeScript types, enums, JSX props, etc. alphabetically, naturally, or by line length.

Generouted
Generated file-based routes for Vite, borrowing ideas and conventions from Next.js, Remix, Expo, Docusaurus, SvelteKit, and more.

pacquet
An experimental package manager for Node.js, written in Rust.

pkg-size
An interactive tool that lets you enter the name of an npm package (or drag and drop one) to provide you with more accurate details on the package size, dependencies, etc.

Get Ahead by Playing Smart with Brilliant
Whether you’re a professional looking for an edge in your career or a lifelong learner sharpening your skills, Brilliant is the best way to learn the concepts driving the modern technological world. Stay competitive with Brilliant's hands-on lessons in math, data, and CS.   SPONSORED 

electron-vite
A fast, simple, and powerful next-generation build tool for Electron with asset handling, HMR, TypeScript decorators, with support for TypeScript, Vue, React, Svelte, SolidJS, and more.

SwitchFeat
An open-source and self-hosted feature flags and A/B testing framework written in Nodejs, Typescript, and React.

Are The Types Wrong?
An online tool to analyze npm package contents for issues with their TypeScript types, particularly ESM-related module resolution issues.

openpm
An open-source package manager for OpenAPI files so AIs can use packages in a similar fashion to how ChatGPT plugins work, to discover and interact with the world via APIs.

cptn.io
An open-source platform that helps develop and deploy integrations and data pipelines quickly and easily.

On the Release Radar:

• Prettier – The popular code formatter is now at version 3+
• patch-package – Fix broken node modules, now at version 8+

The Uncategorizables

PrintFriendly
Online tool to make web pages printer-friendly and convert just about any file to/from PDF, and then edit or sign your document.

Tagbox
An easy, AI-based tool to organize your media files and other assets, free for up to 1,000 files and 50GB of storage.

Graphite
A modern code review tool for teams, to help engineers write and review smaller pull requests, stay unblocked, and ship faster. Includes a modest free plan.

Praxis
An iOS web browser that blocks all JavaScript and cookies, to keep you invisible online.

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.     SPONSORED 

Answer Overflow
An open-source project designed to bring Discord channels to your favorite search engine.

Octos
Create, distribute, and explore live, interactive wallpapers on Windows made with HTML, CSS, and JS.

JavaScript Playground
Yet another simple JavaScript playground, featuring a live feedback loop (i.e. auto-run as you type).

Comic Code
A monospaced adaptation of Comic Sans, designed specifically for programming.

Puppetromium
A single-tab web browser built with Puppeteer that has no client-side JS and the viewport is streamed with MJPEG.

Tikons
An open-source ticket application for full-stack apps built with MongoDB, Express, React, and Node.js (MERN).

DataPulse
A simple, live, fun, and lightweight solution for your website analytics, currently free while in public beta.
 

Commercial Apps and Classifieds

An X Post for Thought

Here's a thread for those addicted to keeping the boxes of purchased devices. I think the reason we keep boxes like this is due to how nicely designed many of these boxes and packages are.
   

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @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...

Brain Survey by The Open Brain Project is a really cool interactive look at the different parts of the human brain. Use the options on the left or click a part of the brain to read info on the selected portion.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris