Issue #547  (Rising Stars, JS Utils, AI Tools, Testing)01/11/24

If you've been reading this newsletter for some time now, you know I cover lots of new and unique front-end tools. I also like to feature the occasional study on trends related to front-end tools, one of which I don't think I've ever shared here before: JavaScript Rising Stars.

This is an annual trends compilation created by developer Michael Rambeau based on growth via GitHub stars (hence the name of the project). The results of the data are spread across 10 categories that cover just about everything in full-stack development, including Front-end Frameworks, Build Tools, Testing, Static Sites, and more).

In addition to the 10 categories, the main section at the top of each annual report is called "Most Popular Projects Overall" and that one might be the more interesting of the bunch.

This year, shadcn/ui (a UI component library based on React and Radix) takes the trophy, so to speak, as the project that gained the most GitHub stars in 2023 – almost 40k stars! It currently sits at about 42k stars, so that's a huge jump in just one year. In fact, the jump covers less than a year because the project wasn't added to GitHub until March of 2023. So the remaining 2k or so stars have been added in 2024 alone (probably as a result of this data set making the rounds!).

There's a lot more to dig into in the project, but I thought it would be interesting to list the stars trophy winner for each year since this has been published:

• 2016 – React
• 2017 – Vue
• 2018 – Vue
• 2019 – Vue
• 2020 – Deno
• 2021 – zx (Google's JS-based alternative to Bash)
• 2022 – Bun (the new runtime/build toolkit)
• 2023 – shadcn/ui

Not a surprise that Vue took first place 3 years in a row but it was surprising to see zx, Bun, and shadcn/ui take the last 3.

There's lots more to analyze in that report so be sure to check it out in full.

Now on to this week's tools!
 

JavaScript Utilities

Env — A utility for verifying that environment variables are present in Node.js, Deno, and Bun, to easily throw an error when an environment variable is missing.

Pagination — A simple pagination script that you can use on TypeScript or vanilla JavaScript projects, with two types of pagination functions.

async-cache-dedupe — A cache for asynchronous fetching of resources with full deduplication, i.e. the same resource is only asked once at any given time.

The Future of Intelligent Composable Content — As the leading intelligent composable content platform, Contentful enables developers and marketers alike to easily deliver compliant on-brand experiences at speed and scale—all within one unified content system. With Contentful, you can create infinitely and publish instantly.     SPONSORED 

Timenames — An interesting npm package that assigns a unique name to each second of the day. The use case mentioned is a recorder app that creates a file name based on the time it's recorded.

Culori — A JavaScript color library that supports the conversion and manipulation of all formats defined in the CSS Colors Level 4 spec, plus additional color spaces. It handles color differences, interpolation, gradients, blend modes and more.

image-dimensions — A utility to get the dimensions of an image, with support for JPEG, PNG/APNG, GIF, WebP, and AVIF.

request-animation-frames — A package that "ponyfills" requestAnimationFrame internally when it's not available, so it works in any JavaScript environment.

Spectral.js —  A powerful and versatile JavaScript library designed to deliver realistic paint-like color mixing in your web-based projects.

yaintl — A stripped-down internationalization library with ICU message syntax that supports complex ICU syntax and a familiar API.

ChatGPT and AI Tools

macOSpilot — A Voice + Vision-powered AI assistant for macOS that answers questions about any application, in context and in audio.

Makedraft — An AI-based tool to generate Tailwind templates through text instructions, with the option to allow the AI to edit only a selected portion of code.

JustCodeAI — A VS Code extension that automatically documents your code with comments, generating JSDoc-compatible comments.

Get Smarter About AI and Tech in 5 min — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more.    SPONSORED 

Featured GPTs — A directory to explore a curated list of useful custom GPTs that are hand-picked and human-tested and updated daily.

Open Custom GPT — A no-code platform for building Custom GPTs using  OpenAI's Assistants API, to add a GPT prompt to your website.

tsDoc Generator — A custom GPT that generates TSDoc-based code comments and documentation for TypeScript projects. Requires a ChatGPT Plus account to use.

v0 —  A generative UI system by Vercel that generates copy-and-paste friendly React code based on shadcn/ui and Tailwind. Free plan includes 200 credits per month.

Design2Code — An open-source app (installable locally) that converts various web design formats, including sketches, wireframes, Figma, XD, etc., into clean and responsive HTML/CSS/JS code.

scikit-learn-ts — A powerful machine learning library for Node.js that uses Python's scikit-learn under the hood.

Advertisement

Testing and Debugging Tools

TimeComplexity.ai — An online tool that uses AI to analyze your code's runtime complexity. Works across languages and without requiring headers, imports, or a main statement.

PageSpy — An all-in-one remote debugging tool that lets you debug remotely, similar to using a browser's developer tools, designed for specific use cases where the developer tools aren't available.

Open Graph Tester — Enter a URL to test how the page will look when viewed on various social platforms (in this case specifically X, Facebook, and LinkedIn.

TSDiagram — An online tool to create diagrams and plan your code for TypeScript projects, with the option to export diagrams as SVG.

Get Smarter About AI and Tech in 5 min — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more.    SPONSORED 

Repro — A Chrome extension that makes bug reporting in the browser more collaborative and reproducible.

viewports.fyi — Not exactly a tool but a resource that makes it clear how fragmented viewport sizes are, with findings of 2,300 unique viewport sizes from users in the US and Europe.

unrot.link — A hosted service that takes a URL and returns a new URL that will check whether the URL is still up and, if not, redirect to the Internet Archive copy. You can host your own or get on the approved domains list using the service.

TestPilot — A tool that uses LLMs to automatically generate unit tests for npm packages written in JavaScript/TypeScript.

Little Rat — An open-source Chrome extension designed for network traffic monitoring, to easily view, monitor, and block traffic from other Chrome extensions on a per-extension basis.
 

Commercial Apps and Classifieds