Web Tools #413 - DebugBear, VS Code, Build Tools, React

The following intro is a paid product review for DebugBear, a Lighthouse-based website speed monitoring tool that provides in-depth reports for developers.

I love the variety of speed testing tools that I come across when doing research for this newsletter. One that you’ll definitely want to check out is DebugBear, a service that continuously tests your pages for Lighthouse scores, Web Vitals, and more.

DebugBear isn’t a run-once-and-done kind of tool that you normally see, but it will continuously monitor your pages at specified intervals, providing you with in-depth reports on what needs to be improved.

Once you’ve signed up for a trial, you can add monitored pages/URLs grouped into different projects.

For each project, fill in the frequency, devices to test on, and region to test from. To quickly add multiple pages that use the same settings, you can use the “Bulk create” option.

Once you’ve added one or more pages for continuous monitoring, the first tests will begin running. When they’re ready, you’ll see the reports in your dashboard, ready for analysis. Here I’ve bulk-added four of my sites for monitoring:

You can filter by Desktop, Mobile, or search via keyword. In my case, the scores on the right give me an overview of where I’ll need to make improvements. The default scores shown are for Lighthouse, but you can also click to view Performance scores:

 Or see a Filmstrip view of the loading process for each page:

From the Monitored Pages view you can click on any of the pages being monitored to examine each of the reports in detail. From there you can analyze any of the following:

• Requests, including an examination of page weight and all the resources being loaded, with load time for each one
• Performance scores based on Web Vitals and Lighthouse
• A full Lighthouse audit
• HTML Validation
• Console errors, warnings, and logs

If you’d like to see a few reports without signing up, the DebugBear team have set up a Public Demo Project with various sites being continuously monitored, including a Trello board, a NY Times article, and more.

These public projects demonstrate another nice feature of DebugBear: the ability to track bundle sizes over time.

In the screenshot above, I’m looking at the changes in bundle size over a 3-month period for resources loading on the Trello board. The same page lets you view a request waterfall for the requested resources and how the sizes and load times changed over the specified period.

A lot of these tests are things you’d have to run separately or manually with other tools, so it’s nice to have them all in one place like this. Additionally, you can integrate DebugBear with GitHub to run it as part of a Continuous Integration (CI) process.

This allows you to monitor things like bundle sizes and Lighthouse scores on each commit.

DebugBear also lets you set up a performance budget. This is a powerful feature that can prevent a project from suffering from performance regressions over the course of many commits. Currently, DebugBear lets you set up a performance budget based on the following metrics:

• Page weight (e..g. Total, HTML, JavaScript, etc)
• Lighthouse scores
• Web Vitals
• Speed Index
• Time to Interactive

Here I've added three metrics to my budget. With this in place, if my budget thresholds are crossed, I'll be alerted. If I've set up continuous integration, my build will fail and I can respond accordingly.

Another feature you might like is the ability to compare tests. The public demo project includes a comparison between NY Times desktop and NY Times mobile.

In some cases, you might want more control over the devices being used for the tests. You can configure these via DebugBear’s Device Definitions feature. This allows you to select either a desktop or mobile device, then drill down to change settings like bandwidth, round-trip latency, CPU throttling, and more.

As you can see, DebugBear is powerful tool to anchor your continuous performance testing workflow. There are lots more features that I haven’t touched on here (for example, setting up alerts, defining server locations, data export, and more) but you can check out the DebugBear docs for a full overview of what DebugBear can do.

You can sign up for a 14-day trial of DebugBear today if you want to try it out with no commitment. The pricing page lists details on the different plans available (click the “show starter plans” link for the less expensive options).


Now on to this week's tools!

VS Code, Text Editors, IDEs, etc.

Typehole
VS Code extension that automates creating static typing by bridging runtime values from your Node.js or browser application to your code editor.

VS Code for Vite
VS Code extension that adds various features to make Vite-based projects easier to build.

UltraEdit
A commercial text editor for Windows, Mac, and Linux that offers a 30-day money-back guarantee and has a number of positive testimonials.

CSS 3D Cube and Box Generator
Generate code for a custom, animated 3D cube that can be modified using a number of different settings.

readme.so
The easiest way to create a README. Use a simple visual editor to quickly add and customize all the sections you need for your project's readme file.
 
HTML Notepad
A native HTML editor for Windows, Mac, and Linux for creating simple text-based pages.

JavaScript Playgrounds
A quick, visual way to experiment with JavaScript code, designed to be loaded as an iframe for easy inclusion in any webpage (for example, when creating docs or learning resources).

File Ops
VS Code extension to easily tag/alias files and quick switch between files.

QuickSnippets
A categorized repository of 1200+ (and growing) code snippets sourced from tweets.

Kalia
A nice VS Code color theme with pastel colors, contextual syntax-highlighting, balanced contrast, and more.

On the Release Radar:

• Sublime Text is now at v4
• Notepad++ is now at v8

Build Tools, Bundlers, etc.

P42
A code 'modernizer' that helps keep code ion your repositories consistently up to date with modern JavaScript and TypeScript standards.

Launchdeck
Service to deploy code from Git to your server the fast and easy way. Free for a single project and 10 deployments per day.

eslint-plugin-tailwindcss
An ESLint plugin for with rules that enforce best practices and consistency using Tailwind.

bundless
A next-generation development server and bundler for esbuild, to build and ship apps faster.

JSPM Generator
JSPM import map generation tool.

Lift
A plugin that leverages the AWS CDK to expand the Serverless Framework beyond functions.
 
Hammer
A minimal-configuration build tool for the browser or Node-based applications with a CLI and appropriate watch and reload workflows.

vite-plugin-windicss
A Vite plugin for using Windi CSS, the next-generation utility-first CSS framework.

pkg
A CLI that enables you to package your Node.js project into an executable that can be run even on devices without Node.js installed.

rad
A general-purpose build tool that's concise, statically typed and supports command tasks, function tasks, and make-style tasks.

On the Release Radar:

• Sucrase - Babel alternative now at v3
• terser - JS parser, mangler, and compressor now at v5+
• Vite - Popular build tool recently hit v2

React Tools

htmr
Simple and lightweight (under 2kb) HTML string to React element conversion library.

useStateMachine
A ½ kb state machine hook for React that's feature complete and has a heavy focus on type inference.

react-textarea-autosize
React textarea component that grows as content is added by the user.

React Interactive
Hover, active, and focus states that improve on CSS pseudo-classes, and a callback when the interactive state changes.

Lazy I18n
A collection of React components and hooks that support internationalization for multiple languages by asynchronously loading key-value pair translation files.

date-range-picker
A flexible React date range picker calendar with no dependencies.
 
React Layout Components
Layout components for React, primarily inspired by Every Layout (the teaching platform for building better adaptable layouts).

System Props
Responsive, theme-based style props for building design systems with React, written in TypeScript.

react-machine
A finite state machine hook for React applications, when useState or useReducer is not enough.

use-eazy-auth
React components and hooks to deal with token based authentication.

SWR
A React hooks library for data fetching.

On the Release Radar:

• Immer - State management, now at v9
• react-select - Now at v4+

A Tweet for Thought

I support this suggestion and it's implementation in all forms of tech.

 

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...

If you love email newsletters (of course you do!) you might want to check out The Sample. They send you a newsletter sample each morning, curated via machine-learning, in topics you're interested in.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee