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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #537 • November 2, 2023

Advertisement

Webflow, the Only Visual Development Platform Designed for Agencies
Be the one clients can’t stop talking about. Trusted by 60,000+ freelancers and agencies, Webflow allows you to build custom websites visually, manage projects in a shared dashboard and collaborate with your colleagues.

Webflow

Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.

Get Started – it's Free →

 
 

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:

open -a "Google Chrome" --args --incognito

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:

"C:\Program Files\Google\Chrome\...\chrome.exe" --incognito

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.
Oddly, there doesn't seem to be any official list of switches published on the Chromium team's documentation, but there is a post called List of Chromium Command Line Switches by Peter Beverloo (who is a Google employee). That page includes about 1,500 available switches with a brief description of each one.

Some of the switches are quite specific in their actions so if you have some sort of behaviour you'd like to enable, you might want to do a keyword search on that page to see if a relevant switch is available. You can also do a web search for "Chrome switches" or similar to check if other developers have discovered any useful ones and mentioned them in blog or forum posts.

Now on to this week's tools!

 

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.

react-multistep

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.

Vectorpea

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.

Biome

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

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Codejet – Transform your Figma designs into clean, production-ready React and HTML code.
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs.    AD 
Frigade – An API and React-based product adoption platform to create onboarding user flows.
Mixo – A no-code AI-based tool that allows you to generate websites with text prompts.
Constant Contact – Easy-to-use AI-based tools for email marketing and client relations.     AD 
Modyfi – A powerful, AI-based image editor with creative tools and real-time collaboration.
Colorcinch – A photo editor and AI "cartoonizer" to instantly create, edit, and turn photos into artwork.

An X Post for Thought

This might be the best version of a user-submitted bug fix ever recorded!
 
An X Post for Thought
 

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

Older messages

Web Tools #536 - JSON Reviver, CSS Tools, Testing, JS Utilities

Thursday, October 26, 2023

Web Tools Weekly WEB VERSION Issue #536 • October 26, 2023 Advertisement Webflow, the Only Visual Development Platform Designed for Agencies Be the one clients can't stop talking about. Trusted by

Web Tools #535 - JS Libraries, ChatGPT Tools, React Native

Thursday, October 19, 2023

Web Tools Weekly WEB VERSION Issue #535 • October 19, 2023 Advertisement Webflow, the Only Visual Development Platform Designed for Agencies Be the one clients can't stop talking about. Trusted by

Web Tools #533 - MDN RegExp, CSS Tools, ChatGPT, JSON/DB

Thursday, October 5, 2023

Web Tools Weekly WEB VERSION Issue #533 • October 5, 2023 Advertisement Webflow, the Only Visual Development Platform Designed for Agencies Be the one clients can't stop talking about. Trusted by

Web Tools #532 - Guitar Tools, React, SVG, Uncats

Thursday, September 28, 2023

Web Tools Weekly WEB VERSION Issue #532 • September 28, 2023 Advertisement Let Auth0 by Okta Take Care of Customer Identity Got better things to worry about than building Identity? If you're an

Web Tools #531 - Video SDK, JS Utilities, Build Tools, VS Code

Thursday, September 21, 2023

Web Tools Weekly WEB VERSION Issue #531 • September 21, 2023 The following intro is a paid product review for Dyte, a platform that provides a powerful SDK to create immersive live video experiences

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your