Web Tools Weekly
Tools for Web Developers

Issue #563  (Support, Frameworks, JSON/DB, Vue)05/02/24


The Complete JavaScript Course 2024: From Zero to Expert
This is an up-to-date JavaScript course covering modern techniques and features that will help you be job-ready.

The course includes 68+ hours of HD video, walking you through how to build 6 beautiful real-world projects to add to your portfolio.

The Complete JavaScript Course 2024: From Zero to Expert

The material is not just a "do as I do" set of lessons, but you'll learn modern JavaScript concepts like ES6 modules, classes, promises, async/await, along with tooling like npm, Parcel, and Babel.

The course covers ECMAScript features from 2022 and beyond, in addition to older concepts that will help you become a JavaScript expert.

Check Out the Course Outline →

As many of you know, I've been writing this newsletter since 2013! Amazing how long it's been and how much the web development industry has changed over that time period.

One thing that's been happening lately, as you've probably noticed, is that there is a huge amount of saturation in the newsletter industry. That's making it harder and harder to make a newsletter profitable. It's harder to find sponsors, which often leads to creators like myself using affiliate links, pay-per-click advertising, or even ad swaps with other newsletters.

These solutions aren't terrible, but they don't bring in enough money to warrant the time I put into the newsletter each week. So for the first time in more than 10 years, I'm going to start offering my readers the option to support the newsletter directly via donations. I'll never make the newsletter pay-only. But I think it's nice if readers have the option to pay, if they have it in their budget, to help keep the newsletter afloat. So here's my pitch:

Support Web Tools Weekly via GitHub Sponsors

This newsletter has about 13,400 subscribers. If I can get $1 USD per month from 2,000 of those subscribers, I would never have to include an advertisement or affiliate link again.
Support Web Tools Weekly on GitHub Sponsors

This is a one-person newsletter, I don't have anyone here to help me find sponsors, do marketing, etc. It's literally just me. So I'd love it if you could help fund the newsletter and I can focus on the content without the need to seek out ways to monetize, which nowadays takes many hours every week.

Of course, some of you won't be able to support the newsletter, and that's perfectly fine. Regardless of what happens with funding, none of the content in this newsletter is going to change and it will always be free as long as I continue to do it.

With funding, those who have it in their budget can support the newsletter on behalf of those who can't afford it or who choose not to. It's basically a pay-what-you-want model.

Support Web Tools Weekly with a One-time Contribution

Of course, you don't have to commit to a monthly sponsor schedule via GitHub to offer a contribution. GitHub Sponsors offers a one-time contribution option and you can also do so using PayPal.

Support Web Tools Weekly via PayPal

From this point on, I will be more aggressively pursuing these types of contributions with, as mentioned, the ultimate goal of removing ads completely from the newsletter.

Thanks to everyone for your continued readership over the years. For those of you who are newly subscribed: I hope this intro doesn't come across as some form of begging. I rarely do this sort of thing, but I'll probably be including more solicitations like this in the ad spots, to help with funding and hopefully removing all ads in the future.

Now on to this week's tools!

Web Frameworks

Franken UI — An accessible, HTML-first, framework-agnostic, beautifully designed component library, inspired by shadcn/ui, and based on Tailwind and compatible with Uikit 3.

DesignSystemHunt — A searchable resource for exploring and finding inspiration from design systems build by popular brands (Instagram, Adobe, Wix, etc).

The Complete JavaScript Course 2024 — An up-to-date course consisting of 68+ hours of HD video, looking at both modern and classic JavaScript features, while walking you through how to build 6 beautiful real-world projects.    SPONSORED 

Full Stack FastAPI — A full-stack starter for building projects with the Python-based FastAPI, React, Docker Compose, PostgreSQL, and more.

Kotekan — A full-stack React framework built on Bun that leverages the latest React capabilities including React Server Components and aims to do as little work on top of React as possible.

SaaSKits — A battle tested boilerplate for building SaaS products, built with Remix, Stripe, Prisma, and Resend, and other essential features to build your product quickly.

Atlassian Design System — Official design system from the team at Atlassian, including tokens, components, patterns, and other resources.

Atlassian Design System

rafty/ui — A Tailwind and React library of responsive and accessible UI components, meticulously crafted to align seamlessly with your app's design system.

kickstartDS — A low-code framework, UI development toolkit, and comprehensive component library enabling digital teams to create their own design systems.

Node-Typescript-Boilerplate — A skeleton project for Node.js applications written in TypeScript, for microservices, with ESLint, Prettier, and Husky.

JSON Tools, Databases, etc.

react-json-view-lite — A tiny component for React to render JSON as a tree, with a focus on the balance between performance for large JSON inputs and functionality.

go-mysql-server — A data source-agnostic SQL engine and server that runs queries on data sources you provide, using the MySQL dialect and wire protocol.

🎹 STRICH – Barcode Scanning for Web Apps — STRICH brings fast & reliable 1D/2D barcode scanning to the web. You don't need a native app to scan barcodes! Free demo, 30-day trial.    SPONSORED 

Marmot — A Go-based, distributed SQLite replicator built on top of the fault-tolerant NATS JetStream.

SheetSQL — Use SQL queries inside Google Sheets, to transform your Google Sheets data with SQL queries. Free plan allows 100 queries per month.

JSON Canvas — An open file format for infinite canvas data, as a way to view and organize information spatially, like a digital whiteboard.

Astro DB — A fully managed, fast, lightweight, and easy-to-use SQL database, designed exclusively for the Astro build architecture.

Astro DB

Docusaurus JSON Schema Plugin — A JSON Schema viewer and editor for Docusaurus, to provide a human-friendly way to examine doc specs.

Stanchion — An SQLite 3 extension that brings the power of column-oriented storage to SQLite.

jaq — A Rust-based clone of the JSON data processing tool jq that aims to support a large subset of jq's syntax and operations.

The Morning Paper for Hacker News Readers
Want a byte-sized version of Hacker News that takes just a few minutes to read? 

Try TLDR's free daily newsletter.

TLDR covers the most interesting tech, startup, and programming stories in under 5 minutes.


No sports. No politics. No weather.

TLDR is read by 1,250,000 software engineers, founders, and tech workers.

Subscribe for Free →


Vue Tools

Zoompinch — A Vue component that adds pinch-and-zoom functionality using a virtual canvas for a more native-like zooming experience.

Vue Color Wheel — A color wheel picker for Vue, built on Vite and Vue 3, helpful for selecting colors by visually showing relationships between different colors, aiding in choosing harmonious color schemes for designs.

vue-metamorph — A codemod framework with a built-in CLI and scaffolding tool for Vue projects that lets you do AST-based code manipulation, with support for Vue SFC, JavaScript, TypeScript, CSS, and SCSS.

NuxtHub — A deployment and administration platform for Nuxt, powered by Cloudflare, to deploy your Nuxt apps with a database, key-value, and blob storage with zero configuration, on your Cloudflare account.


Nuxt API Party — A Nuxt module to securely connect to any API with a server proxy and generated composables.

🎹 STRICH – Barcode Scanning for Web Apps — STRICH brings fast & reliable 1D/2D barcode scanning to the web. You don't need a native app to scan barcodes! Free demo, 30-day trial.    SPONSORED 

nuxt-shiki — A syntax highlighter powered by Nuxt and Shiki, with configurable themes and languages and full lazy loading with auto hydration of highlighted code.

VueFire — Official Firebase bindings for Vue.js that include idiomatic composables for real-time data and other Firebase services.

Pruvious — A Nuxt module that transforms your app into a powerful CMS, with features such as database models, file management, a dashboard, block components, auth, translations, caching, and more.

Nuxt Templates — A community-driven directory of 25+ templates for Nuxt projects, to get up and running quickly.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Larafast – A Laravel SaaS starter kit with ready-to-go components for payments, auth, admin, SEO, etc.
TLDR – A byte-sized version of Hacker News that takes just a few minutes to read.   AD 
NuxtStarterAI – A template with everything you need to build your SaaS, AI tool, or any web app.
Kodezi – A platform and CLI to auto-generate OpenAPI spec  documentation in minutes.
BookBub – Subscribe to get per­sonalized alerts for free and dis­counted top-selling e-books.     AD 
pgAssistant – Chrome extension that provides an AI Assistant embedded inside pgAdmin SQL.
OneSchema – An embeddable CSV importer and solutions for file feed integration and pipelines. 

An X Post for Thought

It's kind of hard to believe that Vue has now been around for more than 10 years, as pointed out by the Vue team on X, where they also link to the original Show Hacker News post, which incredibly, only has ~54 points in upvotes and just 27 comments.
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 like Movies, and music, and Wordle, you'll love NeedleDrop. It's a daily game that plays a song and you get 4 guesses to connect the song to the right movie. With each wrong answer you get clues – the year of release, one of the stars, and a screenshot from the scene that plays the song). You can click the Archive link to view all past NeedleDrops.

Thanks to all for subscribing and reading!

Keep tooling,