The following is a paid product review for Omlet, a component analytics platform for teams using React, to improve efficiency, adoption, and prove design system value. Some of the benefits of Omlet include:
This will install the Omlet CLI then direct you to log in to your Omlet account in your browser. Once logged in, Omlet will scan your repository, create a primary tag for your components, and choose which folders Omlet should scan to find your components. Tagging your components and selecting folders to scan in Omlet
After this first scan, you'll be ready to examine your newly created dashboard, which you can access once logged into your Omlet account. In this review, I'm testing out Omlet using an open-source React-based project called Easy Email Editor, so you'll see some of that project's component data in these screenshots. The Omlet dashboard after your first scan
The Omlet dashboard includes data visualizations for things like Component Usage Over Time, Core Component Adoption Rate by Project, Core Component Adoption Over Time, and Most-Used Non-Core Components. Viewing component adoption data in Omlet
At the bottom of the Analytics section of the main dashboard, there's the super-useful section called How Can I Simplify the Code Library?. This displays two charts showing Unused Component Props and Least Used Core Components. Analyzing unused and least-used component props in Omlet
These insights can allow you to remove or improve specific props or components that have little to no adoption. This simplifies your design library and can dramatically reduce maintenance costs. Sharing a link to a report in Omlet
Each custom chart your team generates can be saved and later viewed at any time in the Saved Dashboard collection in the Analytics section of your main dashboard. Searching for and filtering components in Omlet
When you select an individual component, you can view its dependency tree, props usage, creation date, updated date, and other info. Viewing a component's dependency tree in Omlet
The dependency tree view allows you to see parent vs. child relationships for the component. You can pan around and zoom in/out on the canvas of the component's dependency tree, filter inside the tree view, and highlight specific parent/child relationships as needed. Omlet includes a free plan for individuals who want to get started with component usage visibility, along with the Intro paid plan, which you can try out for 30 days free.
|
||||||||||
JavaScript UtilitiesLLM Scraper — A TypeScript library that allows you to extract structured data from any webpage using LLMs (Ollama, OpenAI, Vercel AI, etc). @texel/color — A minimal and modern color library, featuring fast color conversion, color difference, gamut mapping, and serialization, useful for real-time applications, generative art, and graphics on the web. es-toolkit — A state-of-the-art, high-performance JavaScript utility library that offers a variety of everyday utility functions (alternative to lodash), with a small bundle size and strong type annotations. Snapdrag — A simple but powerful drag-and-drop library vanilla JavaScript and React, with full customization, two-way data exchange between draggable and droppable, and other features. |
Testing and Debugging ToolsReactEmbedDevTools — A library for React projects that allows you to inspect inside an iframe with the embedded DevTools. UI Auditor — An online tool that lets you upload a screenshot of your app’s UI and the tool will tell you how to improve it. TypeScript AST Viewer — Provides a way to view the TypeScript AST, symbols, types, and signatures, with compiler objects that can be interacted with via DevTools. borp — A TypeScript-aware, self-hosted test runner for node:test that also supports code coverage via a popular Node.js library called c8. DomLogger++ — A browser extension (Firefox, Chrome) that allows you to monitor, intercept, and debug JavaScript sinks based on customizable configurations. |
Advertisement
|
Frontend Monitoring Should Be Powerful, and Easy |
React Native and Mobile ToolsNodeSwift — A Swift package that allows you to write Swift code that talks to Node.js libraries, and vice versa. Screenshot Studio — An app for iOS and Mac that enables you to create professional-quality App Store screenshots in minutes (listed as free with in-app purchases). TenTap — A typed, easy to use, customizable, and extendable Rich Text editor for React-Native based on Tiptap and Prosemirror. faster-image — A performant way to render images in React Native with a focus on speed and memory usage, powered by Nuke, for iOS/macOS and Coil on Android. |
Commercial Apps & Classifieds
|
An X Post for ThoughtRicky Robinett, who works in dev relations at Cloudflare, shares a video of his 8-year old daughter learning to build a web app using AI. As someone pointed out in the replies, now that's developer relations!Send Me Your Tools!Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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...I've seen this sort of thing on social media before and I don't know how accurate it is, but True Size of Countries is an interactive map that shows the, well, true size of all countries in the world. Are the exaggerated sizes due to how they're normally displayed on a globe? Or it it some kind of historical bias? Whatever the case, apparently these are the real relative sizes. |