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).
The article provides a number of suggestions, including using Chrome's DevTools to run various tests.
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!
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
An unstyled drawer (or bottom sheet) component for React that can be used as a dialog replacement on tablet and mobile devices.
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.
An open-source React component that allows users to author Markdown documents naturally, just like in Google Docs or Notion.
A concise, intuitive way of writing React applications with high performance, embracing a reactivity system, and mutations.
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.
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.
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:
Build Tools, Bundlers, etc.
ESLint Plugin Perfectionist
Get Ahead by Playing Smart with Brilliant
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.
Generated file-based routes for Vite, borrowing ideas and conventions from Next.js, Remix, Expo, Docusaurus, SvelteKit, and more.
An experimental package manager for Node.js, written in Rust.
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.
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
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.
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.
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.
An open-source platform that helps develop and deploy integrations and data pipelines quickly and easily.
On the Release Radar:
Online tool to make web pages printer-friendly and convert just about any file to/from PDF, and then edit or sign your document.
An easy, AI-based tool to organize your media files and other assets, free for up to 1,000 files and 50GB of storage.
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.
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
An open-source project designed to bring Discord channels to your favorite search engine.
Create, distribute, and explore live, interactive wallpapers on Windows made with HTML, CSS, and JS.
A monospaced adaptation of Comic Sans, designed specifically for programming.
A single-tab web browser built with Puppeteer that has no client-side JS and the viewport is streamed with MJPEG.
An open-source ticket application for full-stack apps built with MongoDB, Express, React, and Node.js (MERN).
A simple, live, fun, and lightweight solution for your website analytics, currently free while in public beta.
Commercial Apps and Classifieds
– Deploy your service with one click, for any programming language or framework.
– A visual website builder for WordPress and WooCommerce websites.
– Push notifications service for teams for iOS and Android, plus many integrations.
– The latest news, articles, and tools for the world's most popular text editor. AD
– Careers page to list job openings, along with a dashboard to manage candidates.
– Fully automate deployments to your AWS account with better DX than Vercel/Heroku.
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!