Web Tools Weekly
Tools for Web Developers

Issue #534  (javascript:, Frameworks, Git/CLI, Uncats)10/12/23


The Most Developer Friendly Video SDK
When integrating video calls, you have a few options. Use WebRTC, the backbone of video calls, or open-source tools like Jitsi, but both have complex configurations & limited customizations. Alternatively, if you choose any traditional Video SDK, you’ll end up sacrificing either speed or customizability.

That’s where Dyte stands out. It’s engineered to fit into your use case. Integrate it on any platform, any device within minutes.

Dyte Video SDK

With Dyte's video SDK, embed video interactions with enterprise-class scalability, HD call quality & security in under five minutes. Start building with Dyte.

Talk to an Expert →

Browsers have an interesting little security feature that I didn't notice until very recently that maybe you weren't aware of either.

First, as you probably know, JavaScript can be executed directly via a browser's address bar using something similar to the following syntax format:

javascript:(function(){Array.from(document.body.getElementsByTagName('*'), e => e.style.outline = '2px dotted orangered');})();

The code is just a simple snippet that adds CSS outlines to elements for debugging purposes. Notice the javascript: portion that begins the code. You'll recognize this because it forms the basis for bookmarklet code, which allows you to save or "bookmark" JavaScript snippets that can run when clicked on any page you execute them on.

So you can literally just start typing a snippet of JavaScript using the javascript: protocol in the address bar, and the code will run on the current page — as long as it's well-formed and encapsulated in a way that works in bookmarklet code.

But what if you find a random code snippet online that someone has shared that uses the javascript: protocol? It's obviously not safe to just copy and paste any snippet you find right into your browser's address bar unless you know exactly what the code is doing. So to combat this, every browser I tested on doesn't allow you to copy and paste a snippet that starts with javascript:  (at least not the full snippet).

So if I was to copy and paste the above snippet into Chrome, or Edge, or Firefox, or any browser that runs on Chromium, the browser would paste everything except the javascript: protocol part of the snippet. That part gets stripped out behind the scenes, to prevent malicious scripts from being haphazardly pasted into the address bar.

Of course, this is not a fool-proof way to prevent malicious scripts from running. Anyone encouraging people to copy and paste a malicious script could easily instruct users to type the protocol before copying and pasting. With this security measure in place, the task is made a little more difficult.

I wasn't sure how far back this goes in browsers, but I did find this Stack Overflow question on the subject, that was first asked twelve years ago. So this does seem to be an old security feature that dates back to early versions of Chrome.

I feel like this is something I must have noticed at some point, but maybe I forgot all about it because it's been so long since I've tried to copy/paste any bookmarklet code directly into the address bar. Whatever the case, it's a decent feature that all modern browsers implement.

Now on to this week's tools!

Web Frameworks

Universal Medusa
A starter codebase to build cross platforms e-commerce apps with Medusa.js using Next.js and Expo.

B2B SaaS Kit
A starter toolkit for developers to quickly build a SaaS product where the customer can be a team of users (i.e., a business), powered by TypeScript, Astro, React, Tailwind CSS, and a number of third-party services.

A React Native utility-first universal design system powered by Tailwind CSS, to provide a consistent styling experience across all platforms, improving Developer UX, component performance, and code maintainability.

Dyte, the Only SDK You Need to Build Powerful Video Experiences
With an uptime of 99.99%, industry-leading documentation, and out-of-the-box plugins, Dyte’s Video SDK is all you need to build audio/video conferencing, live streaming, and chat functionality. Start building with 10K free credits today!     SPONSORED 

NestJS Boilerplate
A NestJS boilerplate template with proper project file structure that provides a sample CRUD controller, Docker, other useful features to quickly create microservices.

Park UI
Beautifully designed components, to build your own component library, built with Ark UI and Panda CSS and compatible with a variety of JS frameworks.

A starter repo for building full-stack, type-safe, LLM-powered apps, powered by Turborepo, tRPC for API routing, Prisma for database access, Next.js, 
OpenAI, and Langchain for LLM management.

A React UI library that includes 100+ components, 20+ React hooks, a custom styling system, theming, dark and light variants, and more.


Material Web
The official web component set for Material 3, to build customizable and accessible web applications.

Chrome Extension TypeScript Starter
A starter kit for building Chrome extensions, powered by TypeScript, React, Webpack, Jest, and more.

Git, GitHub, and CLI Tools

An open-source developer platform with source control management, continuous integration and continuous delivery (CI/CD).

A terminal file system explorer built for interactive ls workflows that can be used as a standalone TUI or in Bash/zsh functions.

FFmpeg Explorer
A visual tool to help you explore FFmpeg filters. Choose from the filters on the left, then the tool will generate the output command and allow you to test the command on a video embedded on the page.

FFmpeg Explorer

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.     SPONSORED 

A full-featured terminal file manager that's tiny, nearly 0-config and incredibly fast.

Bubble Tea
A Go framework based on the Elm Architecture that provides a fun, functional and stateful way to build terminal apps.

A guide and proposed best practice for software developers building command line tools, to encourage them to use a standard method to disable ANSI colors.

A terminal file manager written in Rust that aims to provide an efficient, user-friendly, and customizable file management experience.

Release Please
Automate CHANGELOG generation, the creation of GitHub releases, and version bumps for your projects.

Rio Term
A modern terminal built with Rust that implements iTerm2 and Kitty image protocols, 24-bit true color, and WebGPU.

The Uncategorizables

An open-source alerts management and automation platform that makes it easy to consolidate all your alerts and to orchestrate workflows to automate your end-to-end processes.

An easily-accessible API to fetch song lyrics using a simple GET request along with a search query for the song name and/or band/singer.

A free, fast, and reliable IP geolocation API, free for commercial use up to 60 requests per minute with no API key needed.

System Initiative
A collaborative power tool designed to remove the difficulties from DevOps work. Free while in public Beta.

An online tool to build exportable bitmap (i.e. large pixelated) fonts from custom glyph sets.


A fork of Terraform, an open-source tool for building, changing, and versioning infrastructure safely and efficiently.

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.    SPONSORED 

Commit Mono
An anonymous and neutral coding font focused on creating a better reading experience.

An opinionated platform for seamlessly managing your DNS configuration across any number of DNS hosts, both in the cloud or in your own infrastructure.

Create, understand, and deploy YAML manifests with a visual UI that also provides policy validation and cluster insights.

Commercial Apps and Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Tamagui Takeout – A universal React Native + web starter kit with Next.js, Vercel deploy, Expo, etc.
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs.    AD 
Sparkle – A user friendly website builder that allows anyone to create a professional-looking site.
BuildShip – Create powerful APIs, scheduled jobs, backend tasks, powered by AI.
JavaScript E-Books – 250+ tips, tricks, and little-known facts, with lots of live code demos.     AD 
GoCharlie – An AI platform for content creation, including images, video transcripts, etc.
Code Dryer – A VS Code extension that's a website builder for static websites.

An X Post for Thought

Harry Roberts provides an interesting line of reasoning for those who avoid making their content accessible to all.
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...

noclip.website is a digital museum of video game levels built with WebGL, so you can choose a level then drag around to examine it in 3D.

Thanks to all for subscribing and reading!

Keep tooling,