Web Tools #535 - JS Libraries, ChatGPT Tools, React Native

Advertisement

Back in March of this year, the Astro team released their 2023 Web Framework Performance Report to break some ground in helping developers and framework authors "better understand the relationship between framework choice, performance, and actual user experience on the web."

Towards the end of the report they explain some of the inherent weaknesses of their findings, but this is still a decent start in researching how well different frameworks perform. The frameworks considered are Astro, Gatsby, Next.js, Nuxt, Remix, SvelteKit, and WordPress.

You can check out the full article but I'll summarize their four primary findings here. And note that their team didn't do any actual testing themselves; the results are based on three publicly available datasets detailed in the post.

First, they showed the % of websites that passed Google's Core Web Vitals (CWV) assessment.

As shown, Astro, SvelteKit, and Gatsby performed the best in this area, which might be the most crucial of those considered.

Next they showed how well websites performed using First Input Delay (FID), which demonstrates how quickly a page responds to a user's first interaction.

All the websites did well here with Gatsby as the slowest (though not by much).

Next they show how well the websites performed in terms of Cumulative Layout Shift (CLS), a well-known metric that's been in performance discussions for some time now.

As you can see, Astro, Remix, and SvelteKit do well in this area, with WordPress also performing strongly.

The last one is a measure of each website's Largest Contentful Paint (LCP), another popular performance metric.

In this case, more websites failed the test with Astro and SvelteKit being the only two frameworks that passed more than 50% of the time.

They also show results of an experimental metric that is supposed to replace FID in the future – Interaction to Next Paint (INP) – so you can see how the frameworks performed with that metric as well.

As the authors mention towards the end of the report, newer frameworks are used more often on newer websites. This is going to be a big advantage in performance, so we can certainly take these findings with a grain of salt. I'd guess that if the study was limited to websites built in the past few years, the numbers would probably be a lot different.

Nonetheless, it's good to know that the newer frameworks are doing a decent job at keeping up with the most important performance metrics to help websites rank well in search and help increase conversions.

Now on to this week's tools!
 

JavaScript Libraries and Frameworks

Effect
A powerful TypeScript library designed to help developers easily create complex, synchronous, and asynchronous programs.

Leporello.js
An interactive functional programming IDE for JavaScript, with next-level debugging, and designed for developing HTML5 apps.

Webflow, the Only Visual Development Platform Designed for Agencies
Be the one clients can’t stop talking about. Build custom websites visually, manage projects in a shared dashboard and collaborate with your colleagues all with Webflow.     SPONSORED 

ExpressoTS
A Typescript + Node.js lightweight framework for quickly building scalable, easy-to-read and easy-to-maintain server-side applications.

Surreal
A mini jQuery alternative with dependency-free animations that pairs well with htmx, has an improved vanilla querySelector(), and more.

Agentscript
An ES6 module based and minimalist agent-based modeling system inspired by a programming language called Netlogo.

Nue
A powerful React, Vue, Next.js, Vite, and Astro alternative with an improved developer experience, with separation of concerns, and universal hot reloading.

OS.js
A  library for creating desktop-like experiences on the web, that includes a window manager, application APIs, GUI toolkit, filesystem abstractions, and more.

Seniman
A JavaScript server-driven UI framework that runs your JSX components on the server, enabling your UI to operate without downloading your component and business logic code to the client.

On the Release Radar:

• Fresh – Full-stack Deno framework now at version 1.0
• RedwoodJS – React full-stack framework now at version 6+
• Solito – React Native + Next.js framework now at version 4+
• VanJS – Reactive UI framework now at version 1+
• Svelte – Popular web app framework now at version 4+

ChatGPT and AI Tools

openv0
An AI-based generative UI component framework that allows you to  generate and iterate on UI components, with live preview.

AI Image Generator
A text-to-image Figma plugin that lets you generate unique AI images using a text prompt right inside of Figma.

Dora
A no-code platform with AI features to generate 3D and animated websites. Free while in Beta.

Stocks: Shaky. Recession Fears: Mounting.
The address for the hottest ticket in town? WebStreet. They match accredited investors with portfolio managers specializing in cash-flowing online businesses in areas like Micro-Saas and Amazon FBA.    SPONSORED 

SiegfriedAI
Interact with OpenAI's GPT models from your CLI using prompt-based agents. Simply drop your text files with GPT prompts into the templates folder to create your customized chat agents.

Zoo
A playground for comparing AI image models, built with Next.js, which you can run on their demo server or install locally.

Mage
A GPT-based web app generator to generate a full-stack web app in Wasp, React, Node.js, or Prisma.

ZeroGPT
An advanced and reliable ChatGPT, GPT4, and AI content detector. Just enter text and it will tell you what percentage of the content is AI-generated.

AI Town
An MIT-licensed, deployable starter kit for building and customizing your own version of AI town - a virtual town where AI characters live, chat and socialize.

Plugin Surf
A searchable directory of Chat-GPT plugins that also includes a list of the most popular plugins.
 

React Native and Mobile Tools

clean-rn
A simple CLI tool to clean all React Native caches in your project using a simple command.

store.app
An app store for Progressive Web Apps (PWAs), searchable or filterable by category, and you can submit your own web apps, whether installable or not.

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 

react-native-wireframe-ui
A wireframe UI kit for React Native and web, with Expo, that includes about 20 component primitives.

Nano
A low code react native framework for building and updating native mobile apps in real time using JSON.

How To Target Email Clients
Not mobile only, but this is a searchable resource that lists CSS hacks for targeting different email clients, including many iOS and Android hacks.

expo-ahap
React Native module for loading and interacting with Apple AHAP files (a JSON-like file format that specifies a haptic pattern through key-value pairs).

react-native-z-view
React Native component to show a view on top of all the views in React Native, like an overlay.

App Icon Badge
An Expo plugin/library to add customizable badges to your app icon (e.g. a banner that says "beta" or a ribbon that shows the version number).

On the Release Radar:

• VisionCamera – React Native Camera library now at version 3+
• React Native Notifications – Push notifications now at version 5+
• React Native URL Polyfill – WHATWG URL polyfill now at version 2+
• Ignite – Popular React Native boilerplate now at version 8+
• React Native Paper – Material Design for React Native at version 5+
• React Navigation – Routing solution for RN/Expo now at version 6+

Commercial Apps and Classifieds

An X Post for Thought

10 years certainly makes a difference. It really does seem like more and more tech workers, not just designers, sound like what's described in this post.
   

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

Fudge is like Tetris in the bizarro world. I'm still not entirely sure of the rules here, but it's an interesting concept for a Tetris-inspired game.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly