Web Tools #510 - CodiumAI, Frameworks, ChatGPT, JS Utils

The following intro is a paid product review for CodiumAI, an extension for VS Code and JetBrains that uses AI to generate meaningful tests so you can catch bugs in your code.

There are two things you can be absolutely sure of in modern software development: 1) Writing automated tests is a crucial part of finding bugs and ensuring your code runs as expected; and 2) AI is currently having a big impact on how we write code and build software.

If you're looking for a way to fuse those two realities, you'll definitely want to check out CodiumAI. CodiumAI is an extension for Visual Studio Code and JetBrains that adds code analysis and automatically-generated tests for your code right inside your editor.

CodiumAI currently offers support for generating tests for code written in JavaScript, TypeScript, and Python, with Java support on the way. You can download the VS Code version from the VS Code Marketplace and the JetBrains version (compatible with all IntelliJ-based IDEs) from the JetBrains Marketplace. On both marketplaces CodiumAI has an average rating of 5 stars based on user reviews so far, which is impressive for a new product like this one.

CodiumAI is powered by their own proprietary TestGPT engine, which itself is built on top of OpenAI and ChatGPT. I've installed the extension on VS Code, so I'll show you its features using JavaScript in VS Code.

After installing the extension, I was given the option to log in via GitHub or Google. I chose GitHub, then I was able to see the extension available in my sidebar as well as a logged-in indicator in the status bar area.

When I click to open the CodiumAI panel, it asks me to open a file to start analyzing my code and generating tests.  I'll use a simple file with some basic utility functions, which you can see in the following screenshot.

Notice a few things in the image above: CodiumAI automatically adds a button labelled "Generate tests for the below function" above each class or top-level function in the file. There's also a list of such functions shown in the sidebar. To generate tests, you can click the "Generate tests..." button or click the function or class name in the sidebar list.

I've generated a few tests, which are displayed in a right sidebar panel, with a number of different options and configurations available.

As shown in the screenshot above, there are a number of ways you can work with and configure your tests:

• You can choose a testing framework to use for your tests by clicking the little cog icon in the top right area of the CodiumAI tests panel. Options include Jest, Mocha, and React Testing Library.
• You can use the tabs at the top to switch between the generated Test Suite, Code Analysis info, or Code Suggestions on the selected class or function.
• In the Test Suite tab, you can configure things like test examples, example data inputs, whether to use mocks, and how many tests to generate for each function.

CodiumAI generates your tests based on information the extension is able to glean from your code, code comments, and docstrings (commonly used in Python).

For each generated test, you'll notice there are other a few options available to customize and otherwise work with the individual generated tests.

As shown in the above screenshot, notice the "Reflect & Regenerate" button that will generate an alternate version of the test (indicated at the top where it says "1/2"). There's also a "Suggest changes..." prompt where you can feed instructions to the AI to customize the test according to your preferences.

You can also use the little pencil icon (top-left area) to edit the default "name" and "objective" that the AI gives the test, and you can delete the test entirely if you don't want to include it in the overall test suite (bottom-right area). Similar to other GPT prompts, there's a button called "Give me more tests" that allows you to generate more tests if you prefer.

Once you've decided which tests you want to keep and how you want them customized, there's an option at the bottom of the list of generated tests where you can "open as file" which means the tests are transferred to a file that you can save so you can run your tests in the terminal as you normally would when writing your tests manually.

When you have your results, you can make adjustments and customizations as needed until your tests pass.

As mentioned, CodiumAI isn't limited to the tests themselves, but you also get an analysis of the code on which the tests are generated. This is included in your saved test file and consists of a plain-English description of the objective of the code, the flow, and other useful bits of info.

Finally, the Code Suggestions tab in the sidebar lists multiple ways to improve the targeted code, based on what the AI found to make your code more maintainable, less error-prone, and so forth.

As you can see CodiumAI is a fantastic tool that has a lot of different features packed into a simple and easy-to-use extension for your IDE. Whether you're trying to future-proof modern code or even legacy code bases, it's worth looking into for your testing needs in JavaScript, TypeScript, or Python.

You can give CodiumAI a try today by installing for either Visual Studio Code or JetBrains IDEs. It's currently free for individual developers. If you're a busy developer that wants to stay focused on building stuff without the extra overhead involved with manually writing comprehensive test suites, this is a must-use extension.
 

Now on to this week's tools!
 

Web Frameworks

big-AGI
A responsive personal AI application powered by GPT-4 and beyond, with AI personas, AGI functions, text-to-image, voice, response streaming, code highlighting and execution, PDF import, and more.

TezJS
A Jamstack framework to help you build fast, SEO-friendly websites that are optimized for high Core Web Vitals scores.

lawnmower
A web component library that allows you to build Virtual Reality layouts using HTML tags, with little to no knowledge of 3D or VR required.

Sharpen Your Math, CS, and Data Skills in 15 Minutes a Day
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day.      SPONSORED 

Skeleton
A UI toolkit for Svelte, SvelteKit, and Tailwind that allows you to create adaptive and accessible interfaces for web apps of any shape or size.

Startup
An open-source, premium template for Next.js comes with everything you need to launch a startup, business, or SaaS website, including all essential sections, components, and pages.

Ark UI
A fully customizable and accessible headless library for building reusable, scalable Design Systems that works in any framework.

Prisma + tRPC
An opinionated starter repo built with Next.js and React to build tRPC-based apps with E2E-testing.

Ellegant
A CSS framework that aims to provide user interaction with very little or no JavaScript, providing a fast and clean user experience even on low-end mobile devices.

TailAdmin
A Tailwind-based admin dashboard template that includes UI components, elements, and pages to create a complete, data-driven back-end, dashboard, or admin panel solution.

react-ts-tailwind-starter
A starter template for building projects with create-react-app, TypeScript, ESLint, Prettier, Husky, and more.

nextjs-mongodb-app
A Next.js and MongoDB web app designed with simplicity for learning and real-world applicability in mind.

On the Release Radar:

• Simple Light – Tailwind landing page template now at version 2+
• Storybook – Popular UI component framework now at version 7+
• Mantine – React component library now at version 6+
• neo.mjs – Worker-driven framework now at version 5+
• Vuetify – Material/Vue component framework now at version 3+

AI and ChatGPT Tools

OpenGpt
An open-source AI platform that allows all users to use and create ChatGPT applications in seconds.

Codeverter
A GPT-based code converter that can convert code to/from Svelte, React, Vue, Angular, JS/TS, Rust, Python, and more. Requires an OpenAI API key.

Phind
An AI search engine for developers that you can customize via options to get answers that are more for experts, are more concise, or are more creative.

Kleap
An AI-based website builder that lets you build from 10+ types of websites with contact forms and SEO-optimized.

We scour 100+ Patents to Predict the Future of Tech
Meet Patent Drop — a publisher with expert analysis on how patents are shaping multiple domains — think future of healthcare, electric vehicles, and AI. Delivered twice weekly, this free newsletter is the source of truth for over 25,000 thought leaders across industries.       SPONSORED 

ChartGPT
An online tool that converts text into beautiful charts based on a description of your data and the desired single chart type (area, bar, line, pie, treemap, etc).

Regex.ai
An AI-powered regular expression solver that lets you insert text then select portions of the text to generate matching regular expressions.

Scribble Diffusion
Draw a rough sketch along with text description of something and this AI-based tool will convert the sketch into a refined image of whatever you drew. I laughed out loud while using this, it works really well!

Prompt Engine
From Microsoft, a TypeScript-based utility library for creating and maintaining prompts for Large Language Models (LLMs).

AI to UI
A ChatGPT-based component generator that generates HTML, Next.js, React components from a text description.

chatgpt-api-single
A simple, easy-to-use API server that comes with a queueing capability to prevent large-scale failures due to excessive access.

semantic-search
An OpenAI-powered CLI to build a semantic search index from your MDX files that allows you to perform complex searches across your content and integrate it with your platform.
 

JavaScript Utilities

array-set-ops
Extremely fast set and map/reduce operations for Arrays, Sets, and Cartesian Product.

Lucia
A simple and flexible bare-bones by design user and session management library that provides an abstraction layer between your app and your database.

Lithium: Effortlessly Manage Your Web3 Community
A community engagement platform, powered by AI, that delivers valuable analytics across acquisition, engagement, and monetization, empowering projects to make informed, data-driven decisions.      SPONSORED 

dragjs
A small JavaScript utility that makes it easy to implement dragging operations and interactions on pages.

ArkType
A runtime validation library that can infer TypeScript definitions 1:1 and reuse them as highly-optimized validators for your data.

Zeptomatch
A small glob matcher that supports a dozen or so syntax options and is automatically memoized, with support for compiling to a standalone regex.

Auth.js
Formerly NextAuth.js, an authentication solution for the web with support for Next.js, SvelteKit, and Solid.js.

seroval
A utility to stringify JavaScript values. See usage examples for the full range of what this can output and support.

stellis
A JSX framework for SSR that doesn't use virtual DOM for rendering.

Bling
A set of framework-agnostic transpilation utilities for client/server RPCs, env isolation, islands, module splitting, and more.

Signia
A minimal, fast, and scalable signals library for TypeScript that's framework-agnostic and has official React bindings.

waystone
A page fetching library that makes multi-page applications feel like single-page applications.

On the Release Radar:

• Embetty –  Media/socials embed utility now at version 4+
• DOMPurify – XSS sanitizer for HTML now at version 3+
• FullCalendar – Full size drag & drop event calendar now at version 6+
• Hyphenopoly.js – Polyfill for hyphenation now at version 5+
• zl-fetch – Fetch API wrapper now at version 5+

Commercial Apps and Classifieds

A Tweet for Thought

I don't use Canva but this interaction made me want to. What a show of respect for open-source work!
   

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (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...

Chronophoto is an online game that tests your recognition of different time periods (ranging from 1900 to 2022) through photography.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly