Web Tools #537 - Chrome Switches, React, Media/SVG, Build Tools

Advertisement

In case you weren't aware, when dealing with Chromium-based web browsers, you can customize behaviour and actions of the browser by using something referred to as "command-line switches".

These "switches" are used when starting up the browser and you would apply them in different context depending on your OS. For example, on macOS you could open your terminal and execute a command like this:

The last part of that command is the "switch" being used here. In this case, the browser would open in incognito mode.

On a Windows machine, you can edit the switch directly into a shortcut that runs the switch each time you open the browser with that shortcut. So you can right-click the browser shortcut and edit the "Target" field to look something like this:

I've abbreviated the path for simplicity, but that's the general idea.

I find this is useful for Chrome Canary, because that's usually a browser you'll want to do testing, development, automation, etc. Besides the switch for incognito mode shown above, some useful switches you can incorporate are:

• --auto-open-devtools-for-tabs – Opens DevTools automatically for each new tab.
• --allow-insecure-localhost – Useful so you can avoid any SSL warning pages when debugging projects on a local server.
• --disable-extensions or --disable-extensions-except – The latter switch allows you to include a comma-separated list of extensions you don't want disabled.
• --kiosk – Starts the browser in kiosk mode (i.e. no window or other browser functionality will be visible or available). If you add a URL after the switch, that URL will load in kiosk mode.

React Tools

NSFW Filter
A small React library that helps filter out inappropriate images using AI, currently used on a photo restoration service.

FormsLab
An open-source survey creator and experience management solution that can be used for anonymous surveys, polls, and collecting feedback, built with Next.js, Tailwind, MongoDB, and more.

Webflow, the Only Visual Development Platform Designed for Agencies
Be the one clients can’t stop talking about. Build custom websites visually, manage projects in a shared dashboard and collaborate with your colleagues all with Webflow.     SPONSORED 

react-magic-motion
A set of React components that enable you to easily add animations to your React components like accordions, collapsible sidebars, tabs, and more.

react-prod-sourcemaps
A tool to update app sourcemaps with the original code of ReactDOM's production builds.

virtua
A zero-config, fast, and small (~3kB) virtual list (and grid) component for React.

React Knob Headless
An unstyled and accessible knob primitive for React, tailored for audio applications with support for mouse and touch devices.

react-statechart
A set of React components for visualizing and editing statecharts (hierarchical state machines).

react-multistep
A set of React components to build a multi-step form wizard that breaks long forms into steps.

Microhook
A lightweight library that makes it easy to use React hooks in your code, to help improve development efficiency and code quality.

marz
Still in early development, a fast and lightweight React server components framework for Bun.

 

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

FlowerJS
A Canvas-based JavaScript library for generating flower shapes dynamically that are customizable.

Free Sound Effects
A directory of free searchable sound clips, categorized, and available for use in commercial projects (videos, apps, podcasts, etc).

Vectorpea
From the same creator as Photopea, this is a web-based vector graphics editor, with support for PDF, SVG, and Illustrator files.

Shots
An online tool to create a variety of mockups with options for screenshot backgrounds, different device sizes, a variety of frame styles, and lots more.

The Smartest Use of Screentime Yet
With thousands of bite-sized lessons in math, data science, and CS, available on any device, Brilliant allows you to level up in just minutes a day. Make your free time count. Join over 10 million learners worldwide.    SPONSORED 

audioMotion-analyzer
A JavaScript module that's a high-resolution, real-time audio spectrum analyzer with no dependencies.

free-stock.video
A searchable repository of stock video clips, free for commercial use and categorized/tagged for filtering.

bigjpg
An AI-based online tool that allows you to enlarge images without losing quality. The free version allows up to 3000x3000px, 5MB in size.

VidCutter
A modern yet simple multi-platform video cutter and joiner.

Sprite your SVGs
An online tool to convert multiple SVG files to an optimized sprite for better performance, styling, and options to generate code for use in React or Svelte.

 

Build Tools, Bundlers, etc.

vavite
A set of tools for developing and building server-side applications with Vite, to vastly simplify the SSR workflow.

node-diskusage
A module that implements platform specific bindings to obtain disk usage information on Windows and POSIX platforms.

The Smartest Use of Screentime Yet
With thousands of bite-sized lessons in math, data science, and CS, available on any device, Brilliant allows you to level up in just minutes a day. Make your free time count. Join over 10 million learners worldwide.    SPONSORED 

npm-to-yarn
A package to convert npm CLI commands to their Yarn equivalents (and vice versa).

ESLint Stylistic
Community-maintained stylistic/formatting ESLint rules for JavaScript and TypeScript.

no(po)lyfill
Speed up your package installation process, reduce your disk usage, and extend the lifespan of your precious SSD.

Biome
A comprehensive toolkit for web projects, to format, lint, and more, with support for JavaScript, TypeScript, JSON, and CSS, designed to eventually replace Babel, ESLint, webpack, Prettier, Jest, etc.

remember
A simple, type-safe, singleton implementation, for when your hot module replacement involves re-evaluating a module, but you don't want to actually re-evaluate a portion of it.

skott
A minimalist developer tool that can be used to efficiently generate directed graphs from your JavaScript, TypeScript, or Node.js project. It can automatically collect metadata such as file size, third-party or built-in dependencies, detect circular dependencies, and more.

Expo Orbit
A macOS menu bar for launching builds and starting simulators for Expo apps.
 

Commercial Apps and Classifieds

An X Post for Thought

This might be the best version of a user-submitted bug fix ever recorded!
   

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

If you want to learn Vue, you'll want to check out Vue School, specifically this weekend. All video content will be free to access for 48 hours.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly