AI prompting metaframework (yes, it's real)

Today’s issue: Building an ESM-only future, getting ghosted by Tan France, and keeping our little secret from the React core team.

Welcome to #368.

---

AI prompting metaframework (yes, it’s real)

Chances are, your AI development workflow looks a lot like my 5-year-old son’s “puzzle closet” – a swirling vortex of chaos that grows exponentially bigger every time you add a new toy.

But if there’s one thing I’ve learned from the JavaScript ecosystem, it’s that you can solve any problem if you have enough love in your heart layers of abstraction. Enter dataprompt, a new “metaframework for prompt files” created by David East. Think of it like Astro for AI prompts – bringing your prompts, data sources, and actions into a single, cozy .prompt file. It works a lot like single-file components that combine template, logic, and styling into one file.

And because no JavaScript project is complete without file-based routing anymore, dataprompt applies that same Next.js-style organization to your AI prompts. Drop a file at /prompts/[category]/[id].prompt, and you’ve got dynamic routes wired up to a prompt.

How it works: Dataprompt builds on Firebase Genkit and its dotprompt format, letting you declare everything your prompt needs right in the front matter. Want to fetch API data? Reads/writes with Firestore? Create scheduled tasks? It’s all there:

---
# File name: /prompts/hn/[a]/[b].prompt
model: googleai/gemini-2.0-flash
data.prompt:
  # Set up sources that pipe data into a prompt from anywhere
  sources:
    fetch:
      # this reads like: let pageA = fetch(...)
      pageA: https://api.hnpwa.com/v0/news/{{request.params.a}}.json
      pageB: https://api.hnpwa.com/v0/news/{{request.params.b}}.json
  result:
    # Save data to other places after the output is generated
    firestore:
      push:
        - ['/analysis', output]
output:
  # Structured output specified by Zod schemas
  schema: HNAnalysisSchema
---
Analyze and compare the top Hacker News stories from different pages and provide the following comparison analysis. 
{{json pageA}}
{{json pageB}}

Just like Vue components let you import other components, dataprompt comes with a super extensible plugin system – with built-in plugins that handle everything from basic fetch requests to Firestore operations, plus a simple way to quickly create your own plugins.

Dataprompt can run as its own service, but it’s not another microservice you need to babysit. Similar to how React components can be used anywhere in your app, dataprompt integrates seamlessly into existing projects. Whether you’re running the server or just using it in your code, you can hit any prompt using the same URL pattern that would match its file path:

import { dataprompt } from 'dataprompt';
const store = dataprompt({
  promptsDir: 'prompts',
  plugins: [myCustomPlugin]
});

// A URL of '/hn/1/2' matches /prompts/hn/[a]/[b].prompt
const analysis = await store.generate({
  url: '/hn/1/2'
});

Bottom Line: SFCs changed how we build for the web, so maybe dataprompt’s SFPs (Single File Prompts) can finally do the same for AI – and help us clean up our proverbial puzzle closet before it’s too late.

---

Uploadcare just launched a next-gen video CDN

Building video infrastructure from scratch is one of those excruciating web dev tasks I wouldn’t wish on my worst enemy (except you, Karl).

That’s why Uploadcare’s new Video CDN is such a godsend. It’s an all-in-one solution that helps you integrate enterprise-ready video infrastructure in minutes – without making you go through encoding hell.

Your users get fast uploads and instant video playback that just works, and you get your life back.

Here’s how:

• Adaptive bitrate streaming – dynamically adjust video quality based on the viewer’s bandwidth and device, helping you save on storage and data transfer costs.

• Integrated video player – speed up video release with out-of-the-box player, or integrate the streaming link into your existing player setup.

• Plug-and-play file widget and API – handle video uploads of any size, fast.

All that on top of a multi-vendor global CDN to deliver videos instantly, without any additional processing 🙏.

Check out their live demo on Feb 20th to see how it works – and get a chance to win an Elgato Stream Deck MK.2.

---

What will be logged to the console when this code executes? The answer is below.

window.name = "Mike Tyson";

const me = {
  name: "Tyler",
  sayName() {
    console.log(this.name);
  },
};

const sayName = me.sayName;
sayName();

---

1. Jack Herrington and the TanStack team just released Create-tsrouter-app as a drop-in replacement for create-react-app (RIP in peace). It uses TanStack Router and Vite to give you a clean and simple SPA setup – but if the React team asks, you didn’t hear about it from us 🤫.

2. Convex just announced that they are open-sourcing their entire platform’s codebase and packaging it all up in a Docker container you can run anywhere. You can also self-host it now too – so there’s nothing stopping you from keeping all your data in a 37-tab Notion doc. [sponsored]

3. It’s been a full decade since ES Modules were first introduced, so Anthony Fu wrote about how we should move towards an ESM-only world. I’m pretty sure this is also what the Paris Accords were about.

4. Vladimir Dementyev wrote an article on the Chrome blog called Ruby on Rails on WebAssembly, the full-stack in-browser journey.

5. ESLint now officially supports linting of CSS, and I’d like to preemptively report a series of micro-aggressions to HR.

6. Astro 5.3 just launched with faster page rendering, automatic session storage setup, and other goodies.

7. React Bits is a collection of animated, interactive, and fully customizable React components. They aren’t quite as salty as bacon bits but they’re a lot crunchier.

8. CarbonQA gives your team high-quality QA services that scale. Their US-based testers will break your app repeatedly, work directly in your tools, and do all the manual testing you hate doing yourself. [sponsored]

9. Maximilian Kaske wrote about building The React data-table I always wanted.

10. Lea Verou and Dmitry Sharabin created StyleObserver – a robust library that observes CSS property changes and works around browser bugs for you. It’s also the name of a Queer Eye spin-off I pitched to Tan France, but he ghosted me after I told him that his mansion in Salt Lake City looked like the inside of the Delta Lounge. Truth hurts, Tanny.

---

What will be logged to the console when this code executes?

window.name = "Mike Tyson";

const me = {
  name: "Tyler",
  sayName() {
    console.log(this.name);
  },
};

const sayName = me.sayName;
sayName();

The answer? “Mike Tyson”.

Since we’re not in strict mode, sayName isn’t a method, and we’re not using call or apply, this inside of sayName will default to the window object.

“who uses the ‘this’ keyword anymore??” ya ya