Web Tools #480 - Perf Insights, Frameworks, Media, React Tools

Advertisement

Chrome 102 now includes a new panel in the DevTools called Performance Insights. I have to admit, it feels like there's something new every week in Chrome for dealing with performance in the browser. It starts to feel a little overwhelming.

But this particular feature has the potential to override any overwhelming feelings you might currently have when it comes to how you view performance testing and debugging in the browser. As explained by the Chrome Developers team, this new panel addresses specific problems developers have had with the existing performance panel, including the problem of information overload.

You can find the Performance Insights panel by opening DevTools, clicking the three dots icon (top right), then choosing "More tools". There you'll see all the panel options, including some new experimental panels. One of those is Performance Insights. You can also open it by searching in the command palette.

When you open the panel, you'll see an option to "Measure page load" with another drop-down for various levels of throttling during the test.

The result gives you a typical waterfall view with the ability to play back a recording of the page load. But the most important features here are the "Insights" and "Details" panes on the right.

In the Insights pane you get a simple list of problems found on the page. You can click any item to open it in the "Details" pane. This shows you some basic info on the item along with a simple recommendation on how to fix that item.

There's other features you can use like zooming in and out of the waterfall, matching items in the Insights panel to the waterfall view, importing and exporting previously saved recordings, and more. But I think the main benefit of this panel is the ability to quickly get suggestions on how to fix specific issues without a huge learning curve in using this new panel.

This is now available as an experimental panel in Chrome 102 and higher but I don't see it yet in Edge or Brave, two other Chromium-based browsers. I would assume this will be added when this feature is past the experimental stage.

Now on to this week's tools!
 

Front-end Frameworks

Application Monitoring with Low Overhead
Easily analyze increased response time with intuitive dashboards that help you drill down into individual endpoints, requests, paths, and users tied to your slow downs. Scout quickly shows you the exact endpoint or endpoints causing issues.    SPONSORED 

W3.CSS
A CSS framework from W3Schools that's described as a quality alternative to Bootstrap.

Papanasi
A UI library, still in early development, that can be used Angular, React, Svelte, Solid, Vue, or as native Web Components, compiled via Mitosis.

astro-build-minimal-blog-starter
An SEO-friendly blog template built with Astro that includes canonical URLs, OpenGraph data, and full markdown support.

TikTok Clone
A full-stack TikTok clone built with Next.js, Prisma, TypeScript, tRPC (for type-safe APIs), Tailwind, and more.

Glossary Page Template
A single HTML page with a built-in editor for creating an attractive and responsive glossary page that can be hosted anywhere.

UI Foundations Kit
60+ well-designed, copy-and-pasteable, and themeable React components that work seamlessly with MUI v5 (Material UI).

Barebones Stack
A robust create-remix app with SQLite support, that applies best practices into a clean, batteries included template.

Eruption
A fast, next-generation boilerplate for React/Typescript, built on top of Vite and includes ESLint, Prettier, Husky, and more.

react-boilerplate
An enterprise-level boilerplate for React projects, built with React, TypeScript, Vite, and SCSS.

RemixBlocks
A set of ready-to-use Remix + Tailwind CSS routes and UI components.

Enhance
A web standards-based HTML framework designed to provide a dependable foundation for building lightweight, flexible, and future-proof web apps.
 

Media Tools (SVG, Audio, Video, etc.)

Babbel: Language Lessons For Every Learner
Learn to speak a new language in just three weeks via 10-minute lessons designed by real language experts, focused on conversational skills in 14 languages. Sign up today to get up to 55 percent off your subscription.   SPONSORED 

Wavacity
An open source, web-based audio editor, derived from the Audacity project and modified to run in the browser.

icons.download
A free set of universal SVG-based icons available in 16 different styles – four thicknesses, outline/solid, and round/sharp.

Crop.express
Online tool to quickly crop images to match specific social media requirements, no signup required.

Radix Icons
A set of crisp 15x15 SVG-based icons available for Figma, Sketch, IconJar, React, or just plain SVG code.

Motionity
A web-based motion graphics editor and animation tool that exports to WebM, GIF, or PNG.

svg-path-morph
A simple TypeScript-based library for smoothly morphing between variations of SVG paths.

maps.earth
An open-source maps library and API, powered by Headway and OpenStreetMap.

Pie Chart Maker
An online tool to create customizable pie chart graphics with data, optionally as 3D, and downloadable as PNG, JPEG, or SVG.

Vizzu-Story
An extension for the Vizzu JavaScript library that allows users to create interactive presentations from animated data visualizations built with Vizzu.

Quiet.js
JavaScript binding for libquiet (a C-based library) to transmit data with sound using Web Audio.
 

React Tools

Babbel: Language Lessons For Every Learner
Learn to speak a new language in just three weeks via 10-minute lessons designed by real language experts, focused on conversational skills in 14 languages. Sign up today to get up to 55 percent off your subscription.    SPONSORED 

snoopForms
An open-source Typeform alternative for building complex multi-page forms in minutes using either a built-in no-code builder or via the project's React library.

React Recoil Form
React form library that efficiently handles large forms and only renders fields whose value changes.

react-fontawesome
A React component for Font Awesome, the popular icon library and toolkit for the web.

⌘K
A fast, composable, unstyled command palette-style menu for React. Shows four styles that demonstrate how you can customize it.

react-shepherd
A React wrapper for Shepherd, the popular JavaScript library for building guided tours through your app's features.

react-easy-crop
A mobile-friendly React component to crop, rotate, flip, and zoom images and videos with easy user interactions.

React Calendar Heatmap
A calendar heatmap component built on SVG, inspired by GitHub's commit calendar graph. Expands to the size of the container and is configurable.

react-archer
React component that lets you draw arrows between DOM elements.

React Complex Tree
An accessible and unopinionated tree component for React, with multi-select capability and drag-and-drop.

React Open Weather
A React Component that loads forecast data from the OpenWeather API, WeatherBit, and Visual Crossing API.

rc-image
A image component for React with features like placeholder, preview, rotate, zoom, fallback, and more.
 

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Mux – An API to build unique live and on-demand video experiences.

videosdk.live – The easiest way to build powerful live audio and video apps.

Emerging Tech Brew – The latest tech news, three times a week.  AD

ScreenshotOne – Render stunning site screenshots via API.

Refind – 7 links every day to make you smarter, tailored to your interests. AD

Spacers – High quality, high-res, space-based 3D illustrations and characters.

BrandBird Studio – An image editor for busy SaaS founders to build in public.
 

A Tweet for Thought

Speaking of React, Diego Haz with a gentle reminder that React is not the new jQuery, and is still going strong.
   

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

Apparently Hire Goats is not a joke/parody website. Good to know.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly