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

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:

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.

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

create-t3-turbo-ai
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.

Prismane
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

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

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

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 

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

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

Yazi
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

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

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

Free IP API
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.

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

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

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

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

Commercial Apps and Classifieds

An X Post for Thought

Harry Roberts provides an interesting line of reasoning for those who avoid making their content accessible to all.
   

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,
Louis
webtoolsweekly.com
@LouisLazaris