AI in JavaScript-Land

Today’s issue: Fair software licensing, creating fonts with Rust, and a shout out to all the Herberts still going strong.

Welcome to #313.

---

AI in JavaScript-Land

I usually try to make this newsletter a safe space from AI news, but we’ve had three meaningful releases in the last week from OpenAI, Vercel, and Supabase that are specifically relevant for JavaScript developers.

So let’s quickly descend into the depths of AI hell together and see what our artificial overlords have been cooking up for us – whatever you do, don’t forget your safe-word (it’s “foliage”).

Up first, we’ve got OpenAI introducing Structured Outputs to its API. This is a new feature for that lets you supply your own JSON schemas and constrain the OpenAI models to match those schemas exactly with its output.

The key word here is exactly. OpenAI has already had “JSON Mode” up and running since last year, but it would frequently hallucinate and return poorly formatted JSON with different types than expected.

The most recent GPT update uses Zod–the TypeScript-first schema declaration and validation library–to massively improve its evaluation of complex JSON schema from just 40% accuracy to a perfect 100% accuracy when using JSON Mode with Structured Outputs. This unlocks the ability to build AI apps that are capable of generating structured data from unstructured inputs.

Next up is the Vercel AI SDK 3.3 release. This SDK is specifically designed to help developers build AI apps with JavaScript and TypeScript – and the 3.3 release comes with two experimental new features that look pretty interesting:

• Multi-modal file attachments allow your users to send files to the AI provider via the useChat hook.

• useObject hook lets you stream structured object generation to the client in a React app, showing JSON objects in the UI as they’re being streamed.

Finally, we have Supabase’s postgres.new – a free tool that connects AI to a Postgres database running in the browser via Wasm.

This enables you to quickly populate the database with a .csv file or generate the data using AI. But the killer feature is that it comes with a chat interface that can generate SQL queries and visualize the data that gets returned.

Bottom Line: Congratulations! By reading this story, you now have enough knowledge to call yourself an official AI thought leader™️. Enjoy adding e/acc to your Twitter bio – and to your collection of neck tattoos. They’ll both help you get a lot of dates.

---

Convex launches native Auth

They already give you a “Laravel for TypeScript” experience by providing a real-time backend platform with everything you need to build your app.

But Convex just took it one step further by adding a powerful library for implementing auth directly into your Convex backend.

This lets you authenticate users without needing an auth service or even a hosting server – and it comes with all the power and simplicity Convex is known for:

• Easily implement Magic Links, OTP emails, and 80+ OAuth integrations out of the box.

• Get the type safety and DX upgrades of tRPC, combined with the all-in-one experience of Firebase.

• Unlike Firebase and other NoSQL data stores, Convex is fully transactional and fully reactive.

Try out the free tier – and see why hundreds of developers are saying, “it’s everything I wanted Firebase to be and more.”

---

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      const todos = state.todos
      return {
        ...state, todos:
        todos.concat(action.payload)
      }
    case 'REMOVE_TODO':
      const todos = state.todos
      const newTodos = todos.filter(
        (todo) => todo.id !== action.id
      )
      return { ...state, todos: newTodos }
    default:
      return state
  }
}

---

1. Sentry just launched Fair Source software licensing that aims to provide a sort of middle ground licensing option for software companies with OSS aspirations.

2. Have you ever wondered what a gradient generator would look like if it was built by someone who was 1. really smart and 2. had a lot of (I assume) free time? Well, now you know.

3. QA Wolf writes hundreds of tests for your product in Playwright, maintains all of those tests for you as your product scales, and provides the infrastructure to let you run 100% of your test suite in parallel – so your team can ship faster, with confidence. It feels like magic. [sponsored]

4. Chevy Ray wrote about how they created 175 fonts using Rust. I don’t know Chevy personally, but I can’t think of better name for someone who generates 175 fonts in Rust than “Chevy Ray”.

5. TkDodo (who I do know personally) wrote an Introduction to XState Store and shared why he’s so excited about it.

6. ViteConf just announced their speaker list which includes creators and maintainers from just about every interesting project in the JavaScript ecosystem. Rumor has it even Snoop Dogg himself will be attending (that’s a lie I made it up).

7. usBabyNames.js is a Node.js/promise-based data provider about baby name usage in the US from 1880-2023. S/O to all the “Herbert”s who are still around (and RIP to those who aren’t 🍻).

8. Raygun (the monitoring platform, not the breakdancer) just released a fascinating study that benchmarks the various OpenAI LLMs for automated error resolution. It shares which models provided the most practical and helpful responses, and what developers can do to better leverage LLMs to catch bugs. [sponsored]

9. Ethan Niser wrote about Effect Best Practices. Not to be outdone…

10. We also wrote about best practices for managing effects (but in React). Looks like that “creating viral effect content” webinar that Ethan and I attended together last week is really paying off.

---

The todos variable is being re-declared within the same block. Variables declared with const and let are block-scoped, meaning they don’t exist outside of the block they were called in. Blocks are created with {} brackets around if/else statements, loops, and functions.

There are many solutions, including changing the variable name in the different cases or removing the variable altogether. We can also wrap each of our cases in a block to isolate the variables.

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO': {
      const todos = state.todos
      return {
        ...state, todos:
        todos.concat(action.payload)
      }
    }
    case 'REMOVE_TODO': {
      const todos = state.todos
      const newTodos = todos.filter(
        (todo) => todo.id !== action.id
      )
      return { ...state, todos: newTodos }
    }
    default:
      return state
  }
}