Web Tools Weekly
Tools for Web Developers

Issue #595  (JS Utils, Testing, Text Editors)12/12/24


Advertisement

Uncover React Component Usage Across Dev Teams
Omlet gives you data to inform your dev roadmap by analyzing your React components for you.

Omlet

Visualize how and where components are used across your code repos to reduce front-end tech debt and prove design system value.

Try Omlet for Free →

 

JavaScript Utilities

Khoshnus — A library that lets you animate SVG-based text with a handwritten effect, with multiple font styles, and the animations are fully configurable and customizable.

Draggable Carousel — A small library that makes carousels draggable on desktop while keeping native wheel/scroll gestures.

jet-validators — A list of common TypeScript validator functions and some useful utilities to go with them.

Omlet – React Component Usage — Dev teams use Omlet for broad visibility into component library usage. Shorten dev cycles, drive design system adoption, and maintain cleaner code. Get a free report with easy setup, in <5 minutes.    SPONSORED 

state-ref — A state management library focused on data immutability that combines proxies and the functional programming lens pattern to efficiently and safely access and modify deeply structured data.

Nano-Spawn — A small, dependency-free utility that provides a better child_process for Node.js for process execution.

@isaacs/catcher — A utility that lets you call a function and return a fallback value or undefined if it throws, to cut out the performance overhead of creating a stack trace, for cases where it won't be used anyway.

Kinesis.js — A library that offers a suite of components to create engaging animations and transformations based on user interactions like mouse movements, scroll events, and even audio input.

SmarkForm — A powerful library for creating markup-driven and extendable forms in web apps, to enhance form templates with advanced capabilities like dynamic list manipulation and context-based interactions.

SmarkForm

Cache Decorator — A TypeScript library providing a customizable cache decorator for methods, which allows you to easily cache method results with configurable caching mechanisms.

Testing & Debugging Tools

Cronvex — An implementation of an HTTP webhook-calling cron service that allows you to send HTTP requests on a periodic schedule.

DNS Records Database — A comprehensive and extensive DNS (Domain Name System) records database with more than 4 billion records.

NoDNS — A service to quickly preview websites without changing DNS with support for subdomain-based URLs and automatic TLS/SSL.

TypeScript Console — A Chrome extension that lets you run and debug TypeScript code in Chrome's DevTools with support for the latest TypeScript features and ability to import npm packages.

Sick of Biased News? — Sign up for 1440's daily newsletter. It's free, has no biased opinions, and is only a 5-minute read.    SPONSORED 

Diff Text — An online tool to quickly find the difference between two blocks of text content with options to diff by words, characters, or lines, and you can also diff by uploading files.

Diff Text

What in Zod's Name? — An online resource to visually debug errors when using Zod, the popular TypeScript-first schema validation library.

Donobu — A native macOS app for engineering teams to automate 'dogfooding', or testing your product in a real-world environment, like regular users.

google-fonts-testing — A repo with test pages that can be used to do performance tests comparing Google Fonts' default embed code vs. more optimal approaches.

performance-leaderboard-pagespeed-insights — A plugin to run Lighthouse (on PageSpeed Insights) against a set of URLs, to see which site is the fastest.
Advertisement

Ensure Pixel-Perfect Experiences with BrowserStack
Struggling with visual bugs? BrowserStack’s Visual Testing Suite—featuring Percy, App Percy, and Visual Scanner—ensures pixel-perfect interfaces by catching inconsistencies early:

  • Percy Visual AI Engine detects crucial changes while ignoring rendering noise.
  • Visual Scanner monitors and auto-detects website changes without coding.
  • Seamless CI/CD integration enables visual reviews with every code commit.
  • Collaborative tools streamline team alignment on visual updates.
BrowserStack

Test across 20,000+ real devices, integrate effortlessly, and ship with confidence—faster than ever.

Get Started for Free! →


 

VS Code Tools, IDEs, etc.

The tools below were featured in recent issues of my other newsletter VSCode.Email. Subscribe if you haven't done so already, but here's a sampling of what I've included in recent months.

NPM Studio — A VS Code extension to manage your npm packages directly from the editor. Quickly find, install, update, or remove packages without touching the command line.

Rustpad — An open source collaborative text editor "based on the operational transformation algorithm". Not just for Rust, as the name implies, but you can collaborate in real time for dozens of programming languages.

Icônes — A VS Code Extension for Icônes, an Icon Explorer with instant fuzzy searching, powered by Iconify, and allows direct download of the icons in SVG format.

Sick of Biased News? — Sign up for 1440's daily newsletter. It's free, has no biased opinions, and is only a 5-minute read.   SPONSORED 

CursorChat Downloader — A VS Code extension that lets you export and view your Cursor AI chat history, browse through your past conversations, view code snippets, and save chat histories from all your workspaces.

Ctrl+Alt+Cheat — A VS Code extension that provides quick access to a wide range of cheat sheets for various programming languages including PHP, JavaScript, Vue, React, MySQL, Tailwind, Bootstrap, C++, CSS, and more.

Vim for React Developers — A mini course from someone who recently took the time to learn Vim, applying the different motions (or commands) to a React code base.

Web Visual Editor — A VS Code extension that allows you to visually edit HTML files in real time with live preview and features like element selection, zoom, drag/drop elements, and lots more.

Web Visual Editor

Comment Issues — A neat little VS Code extension that allows you to automatically link issue numbers in your code comments to your repository issues.

Python Online — An online playground to compile, run, and share Python code right in your web browser with no installation or local setup required.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
SaasCore – A Next.js boilerplate for SaaS apps built with Tailwind, shadcn/ui, TypeScript, and more.
The Rundown AI – Join 750,000+ readers and get the latest AI news in 5 minutes a day.   AD 
Pimosa – A Mac and Windows app to convert, edit, and enhance video, photos, and music files easily.
Squire.ai – A code review tool that only requires you configure team coding rules and practices once.
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights.    AD 
Reliv – A platform to automate QA tests in minutes without writing a single line of code.
Wordware – A collaborative prompt engineering IDE that brings structure to human-AI collaboration.

A Bluesky Post for Thought

I do find it fun to set up a new desktop computer or laptop, but, as this post on Bluesky points out, sometimes we just want things to work without all the extra effort to configure everything the way we like.
 
An X Post for Thought
 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X or via chat on Bluesky (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...

Playlists is a resource that allows you to see what music designers listen to while doing their design work. There are links to curated Spotify playlists that are geared towards different stages of work.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris