Web Tools #539 - Raw JS, Frameworks, Git/CLI Tools, Jamstack, CMS's

Advertisement

Over the years there have been numerous articles on "things to learn before you learn React", or similar posts. Basically these are posts featuring specific JavaScript features (often from ES6 or later) that help to understand how React works and what parts of the language it uses under the hood.

Last year I came across another such article called Learn this before React over on dev.to. The article has an interesting set of features that the author thinks are useful as precursors to learning React including methods like map() and filter() and features like destructuring and Promises.

But I had saved the article specifically for the top comment on the post by Jon Randy. It reads in full:

"I would strongly suggest building a website without using a framework/library first, so you can understand what problem they are actually solving and gain an understanding of what goes on 'under the hood'. I've interviewed wayyyyyy too many developers who can throw something together in React, but are totally clueless when I ask them to do some basic stuff in vanilla JS. This problem is steadily getting worse and worse."

Now imagine that same scenario under the umbrella of a development world where tons of stuff is being built using tools based on ChatGPT. Not to say that ChatGPT is a bad thing (I've used it myself for many things) but I can see this problem getting worse as many "coders" won't even be able to talk their way through a basic React snippet, let alone something in pure JavaScript.

But ultimately, does it even matter? If we can build things that work and that solve problems and bring in revenue for us and our clients, why do we care if we can explain the code? Are engineering interviewers going to be a lot softer on those who don't really get the code, but at least they can use an AI prompt?

I doubt that's in the near future, but it does seem like things are headed that way at least a little bit.

That's why I always appreciated raw coding resources like Phuoc Nguyen's Mastering DOM manipulation with vanilla JavaScript, which is making the rounds again and continues to get updates. It got some praise and heavy discussion over on Hacker News as well.

In a similar vein, all my JavaScript tips from this newsletter and on my blog I've amassed into a 4-ebook series that you can buy at a discount over on Leanpub.

In summary, the popularity of libraries and now ChatGPT have changed things a lot. But I think we're far from a time where hand-coded pure JavaScript is going to disappear.

Now on to this week's tools!
 

Web Frameworks

Hashnode Blog Starter Kit
A starting template to instantly deploy a Next.js and Tailwind-powered front end for your Hashnode blog.

shadcn-vue
A Vue port of shadcn-ui, a set of accessible, customizable, and beautifully designed components that you can copy and paste into your apps.

HTMLrev
A directory of free templates on various external websites, filterable by technology (React, Tailwind, etc.) and all available to use on commercial projects.

Barcode Scanning for Web Apps
STRICH is a JS library that allows you to move your company’s barcode scanning workflows to web apps. It has simple and transparent pricing, is easy to integrate with zero dependencies, has a built-in UI and offers a free 30-day trial.     SPONSORED 

Quill
A modern full-stack SaaS platform built with the Next.js 13.5 App Router, tRPC, TypeScript, Prisma, Tailwind, and lots more.

Clone UI
An AI-based tool to generate UI components from a simple text prompt, ready to copy and paste into a Tailwind project.

Next.js Commerce for Medusa
An open-source template to build your custom Next.js storefront, already connected to Medusa’s backend modules with all the latest features.

KitForStartups
A starter kit for building and shipping fast, secure, and scalable full-stack SaaS applications with SvelteKit and TypeScript.

Neobrutalism Components
A collection of type-safe components written in React and Tailwind in the neobrutalist style (i.e. a mix of regular brutalism and more modern typography).

On the Release Radar:

• Lit – Web components framework now at version 3+
• TailwindBlog – Next.js & Tailwind starter now at version 2+
• TW Elements – Interactive Tailwind components now at version 1+
• CodyFrame – CSS components framework now at version 4+
• Halfmoon – Drop-in Bootstrap replacement now at version 2+

Git, GitHub, and CLI Tools

gittuf
A security layer for Git repositories that handles key management for all developers on the repository, allows you to set permissions for repository branches, tags, files, etc., among other features.

change-case
Shell script to change the case of text to just about any format – title case, upper/lower, camel case, kebab case, etc.

verto.sh
A hub of curated open-source projects ideal for beginners making their first contribution, founders building teams, and maintainers seeking new contributors.

Whiz
A coding copilot for your terminal, powered by Chat GPT.

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 

Rio
A hardware-accelerated GPU terminal emulator with true color support powered by WebGPU to run on desktops and in browsers.

Gowebly
A next-generation CLI tool for building web applications with Go on the back end and using htmx and hyperscript and popular utility-first CSS frameworks on the front end.

Termost
A TypeScript-based framework to build CLI applications.

Gitbeaker
A comprehensive and typed GitLab SDK for Node.js, Browsers, Deno, and via CLI.

codespelunker
A command line search tool that allows you to search over code or text files in the current directory either on the console, via a TUI or HTTP server, using some Boolean queries, or regular expressions.
 

Jamstack and CMS Tools

Rspress
A fast static site generator based on Rspack, a popular Rust-based web bundler.

23 Starter Projects
A curated resource of starter projects you can use to jumpstart your use of Eleventy, the popular static site generator.

Webstudio
A Webflow alternative, a visual website builder with an option to self-host the open-source version or use one of the pricing plans.

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 

fusion.ssg
A minimal framework for building static websites, with no initial project config required, quick build times, support for .tsx and .jsx compilation, and lots more.

Primo
A visual CMS with a built-in code editor, Svelte blocks, and static site generator.

Quiqr
A native Mac, Windows, or Linux app that run and build static sites locally, powered by Hugo.

Vituum
A small and fast static site generator for Vite featuring Vite plugins, fast prototyping, template engines, and email templates.

Share Pear
A platform built with Astro, Netlify On-Demand Builders, and Edge Functions to consume markdown content and generate public HTML pages from that content.

BCMS
An open-Source headless CMS that provides easy content modeling for creative Next.js, Gatsby.js, and Nuxt.js projects.

On the Release Radar:

• Payload – A TypeScript-based CMS, now at version 2+
• Docusaurus – Beautiful documentation solution now at version 3+

Commercial Apps and Classifieds

An X Post for Thought

I bet you thought you could relax on Sunday and enjoy some NFL football without thinking about JavaScript, huh? Well, think again.
   

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

Here's a resource that might well be a one-of-a-kind: SecondHandSongs is purporting to become "the most comprehensive source of cover song information."  A song data resource on cover songs. Very cool idea! Now if only I could go back in time and not click on Eddie Murphy's version of "Good Day Sunshine".....

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly