Web Tools #526 - Faster DOM, React, Build Tools, Uncats

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #526 • August 17, 2023

Advertisement

Onboard: Secure AI Chat On Any Codebase
Onboard lets you talk to any GitHub repo. You can locate functionality, understand different parts, and generate new code with the context of your codebase. 

Onboard

Onboard is secure and SOC2 compliant. We don't store any of your code after initial processing. Use coupon code WEBTOOLSWEEKLY for a free month of Onboard Pro!

Use it for Free!

 
 

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.
A screenshot of selected style recalculation in DevTools

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.

MDXEditor

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:

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.

pkg-size

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:

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.

Graphite

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

VK Newsletter
I help developers grow — I share my thoughts as a CTO about building digital products, growing teams, scaling development and in general being a good technical founder.    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

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Zeabur – Deploy your service with one click, for any programming language or framework.
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs.    AD 
Oxygen – A visual website builder for WordPress and WooCommerce websites.
PingBell – Push notifications service for teams for iOS and Android, plus many integrations.
VSCode.Email – The latest news, articles, and tools for the world's most popular text editor.    AD 
Hire.win – Careers page to list job openings, along with a dashboard to manage candidates.
Flightcontrol – 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.
 
A Tweet for Thought
 

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 everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #525 - JS Utilities, JSON Tools, SVG

Monday, August 14, 2023

Web Tools Weekly WEB VERSION Issue #525 • August 10, 2023 Advertisement Get Smarter In 5 Minutes With Morning Brew (It's Free) There's a reason over 4 million people start their day with

Web Tools #524 - Frameworks, AI/ChatGPT Tools, Svelte

Thursday, August 3, 2023

Web Tools Weekly WEB VERSION Issue #524 • August 3, 2023 Advertisement Get Smarter In 5 Minutes With Morning Brew (It's Free) There's a reason over 4 million people start their day with Morning

Web Tools #523 - JS Utilities, Testing Tools, Uncats

Thursday, July 27, 2023

Web Tools Weekly WEB VERSION Issue #523 • July 27, 2023 The following intro is a paid product review for Dopt, a component library, SDKs, and APIs for building self-serve product onboarding and

Web Tools #522 - CSS/HTML Tools, SVG, React

Thursday, July 20, 2023

Web Tools Weekly WEB VERSION Issue #522 • July 20, 2023 Advertisement Make Your Logins Awesome with Auth0 for Startups! We know you have a million things to worry about. Let us take care of identity,

Web Tools #521 - JS Libraries, Git/CLI Tools, Uncats

Sunday, July 16, 2023

Web Tools Weekly WEB VERSION Issue #521 • July 13, 2023 Advertisement Securely Share 2FA Tokens With Others, No Phone Needed A browser-based 2FA authenticator for you and your team. Easy import from

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your