DEV Community: Ashish Khare😎

Prompts should live outside.

Ashish Khare😎 — Wed, 17 Sep 2025 15:39:17 +0000

Recently, I’ve been working on an AI wrapper with NextJS and the Google GenAI SDK. For the most part, the entire context text and prompts lived inside the functions, which bloated the function bodies. A file that could have been just 50 lines grew to around 500 lines. 🤯 This pushed me to move all the prompt text into separate files and organize them under a prompts folder. Not only because of the file length, but also because it became difficult to view functions together and identify areas for change.

TL;DR

Prompts should live outside application logic — treat them like static assets (images, configs) instead of embedding them inside functions.
Separation of concerns matters — keep values (prompts) independent from logic to avoid bloated files and improve maintainability.
Lightweight templating with pm — a simple regex-based tagged template function can substitute variables in prompt text, reducing repetition.
Language-agnostic storage — saving prompts as .txt or .prompt files (with loaders or templating engines) removes runtime dependency on JavaScript.
Avoid black-box solutions — don’t chase all-in-one frameworks; instead, use modular, composable building blocks that keep flexibility and clarity.

Preachings of Dan Abramov

I’m a believer in the teachings of Dan and want to clarify the mental model of values, i.e.,

As we start building our mental model, one of the first common misconceptions

we need to clear up is that values are our code. Instead, we need to think of them

separately—our code interacts with values, but values exist in a completely

separate space.

Quoted from Just JavaScript by Dan

I strongly believe that values—here, the prompts being simple text—should exist outside the logic sphere. Just as you place images and other static assets in the public folder, separate from your code files, prompts should also be placed outside coding files.

Building on this notion, I would like to present a few ways of placing your prompts and context files separately from your code.

The `clsx` for templating

For this project, I didn’t want to introduce any compiler-level intricacies. Instead, I came up with a clever use of template strings and regex, which can be imported as functions and invoked with an object of data to render the template.

Let me jot down the requirements for better understanding. I wanted:

No object nesting
Simple substitution
Ability to import templates as callable functions
Templates to accept an object of data

For this section, I would like to thank goober css for introducing me to tagged functions in template strings. Also, credit to the inventor of the clsx function, used by shadcn UI components back in the day, when it was a one-liner: classNames.filter(Boolean).join(' '). These two sparked a connection and inspired me to write a small tagged function that can be used with template literals and later return a function.

The returned function runs a regex to identify escaped entities, which are then substituted with values. Hence, I created the pm function (short for prompt-maker). The best part of pm is that it returns a function that can be reused multiple times to render the template with different sets of values.

function pm([string]) {
  const pattern = /\{\{\s*?\.?([\w\d]+)\s*?\t*?\}\}/g;
  return (context) => {
    for (let [match, variable] of string.matchAll(pattern)) {
      string = string.replaceAll(match, context[variable]);
    }
    return string;
  };
}

const introductoryPrompt = pm`
Hello {{world}}, my name is {{name}}.
I'm working on {{project}}.
`;

introductoryPrompt({ 
  world: "World!", 
  name: "Ashish", 
  project: "tilde",
});

/*
Output ->

"
Hello World!, my name is Ashish.
I'm working on tilde.
"
*/

This small hack solved the bloated file problem for me.

The `.prompt` files and loader

The pm function still depends on the JavaScript runtime for the prompt files to be created, which makes it language-dependent. But what if I decided to create a dedicated Go server for handling API requests and logging? All the prompt files would still require a JavaScript environment.

A solution would be to save the prompts as simple .txt files instead. This removes the dependency of prompt files on any specific language. For example, consider the following prompt file:

Hello {{world}}, my name is {{name}}.
I'm working on {{project}}.

The fenced words can be identified and replaced—just like in any templating language. If I were using Go, I could leverage the text/template package from the standard library. In the case of meta-frameworks like Next.js, which internally use Webpack to parse arbitrary languages (yes, JSX isn’t really a language!), we could write a custom loader to convert raw prompt (or text) files into callable functions. This would behave similarly to what our pm function returns, or even implement a very basic version of HandlebarsJS.

With this idea in mind, I created a minimal loader to test my hypothesis—and it works! The following code includes the loader file, Webpack configuration, and the function call. The code uses CommonJS because the loader documentation was in CJS (and ChatGPT followed my initial code).

// loader.js
module.exports = function (source) {
  const escaped = source.replace(/`/g, "\\`");
  return `
    module.exports = function (data) {
      let template = ${JSON.stringify(escaped)};
      return template.replace(
        /\\{\\{(.*?)\\}\\}/g, 
        (_, key) => data[key.trim()] ?? "",
      );
    }
  `;
};

// webpack.config.js
module: {
  rules: [
    {
      test: /\.prompt$/,
      use: {
        loader: path.resolve(
          __dirname, 
          "loader.js",
        ),
      },
    },
  ],
},

// context.prompt
Hello {{world}}, my name is {{name}}.
I'm working on {{project}}.

// index.js
const Context = require("./context.prompt");

console.log(
  Context({ 
    world: "World!", 
    name: "Ashish", 
    project: "tilde",
  }),
);

You can also use a full-fledged templating engine to be on the safer side—or anything in between, depending on your curiosity and requirements.

Other options on the shelf

The closest available option is the prompt templates on the Vertex AI dashboard. However, the website lists several limitations, and they can’t be used with system prompts. The implementation process is stricter, and I’ve only tested them on the dashboard.

I also found dotprompt by Google, which provides executable files along with prompts and metadata for models, such as output structure. However, it defeats the real purpose of storing values as separate entities.

There is also Generative AI Scripting by Microsoft, which again handles the process of calling LLMs for you. Although, the use of the $ symbol reminded me of jQuery and the magic it once brought.

Most solutions have coupled behavioral logic with the data itself. Think about it—do SQL tables know what query language they use? Or does HTML code know what a window represents for any browser?

Conclusion

If there’s one lesson to take away from this post, it’s this: don’t chase shiny things just because they promise an all-in-one solution. Instead, pick the plain Lego pieces and build a working solution yourself. Otherwise, you’ll lose your sanity debugging these black boxes!

Also, as an educated and responsible software engineer, you should employ the principle of separation of concerns—keep data, logic, and configuration independent of one another. This not only makes your codebase easier to maintain but also allows you to swap out individual parts without breaking the entire system. By doing so, you gain flexibility, improve testability, and future-proof your architecture against inevitable changes in tools and frameworks.

Plus, I’m still exploring the prompting space and tend to jump into coding faster than doing research. If you find the perfect solution to this problem, feel free to point it out to me. 🙇

Use generators for magic in React

Ashish Khare😎 — Wed, 25 Dec 2024 11:43:03 +0000

Let me put it straight: you're overdosing on hooks. Even your IDs and keys are living as state in your React app. useState hooks trigger a side effect of updating the virtual DOM whenever the state changes. Storing irrelevant data as state is bad for performance.

Not all cases can be solved with generators. However, you can replace complex hook patterns with generators to simplify the logic, making it more manageable and extendable.

TL;DR

Use generators to generate data dynamically in React components. Generators can simplify the logic and reduce reliance on hooks.

I'll present a simple example to help you understand where and when to use generators.

What are generators?

Generators are functions that can be paused and resumed. They are created using a function* declaration and yield expressions.

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

You can use them to iterate over a collection of data or to generate a sequence of data, which, in turn, could be used to render content inside components.

Still confused? Let's build a simple example to understand the use of generators.

Headline Example

Let's say you have a list of headlines that you want to render in your component.

const headlines = [
    "Local Shops Thrive",
    "Team Wins Finals",
    "Stay Flu-Free",
    "New Phone Launch",
    "Sunny Week Ahead",
];

You can do it by iterating over the headlines array and rendering each headline inside the component, via storing the index as a state variable.

import { useState } from "react";

const Headlines = () => {
    const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{headlines[index]}</h1>
            <button onClick={() => setIndex((index + 1) % headlines.length)}>
                Next
            </button>
        </div>
    );
};

This works well until you have a linear array of headlines that you want to iterate over and display repeatedly. Now, what if you want to create a pattern with your headlines? For instance, first, display a greeting message based on the time of day, then display the day of the week, and finally follow up with a random motivational thought.

const headlines = [
    "Good Morning", // Greeting message
    "Today is Monday", // Day of the week
    "Stay positive", // Motivational thought
];

Now, you can't simply iterate over a set of static data. Instead, you need to compute each headline dynamically.

But you're the megamind. You come up with an idea: why not create three functions that compute each part of the pattern and use their output as the render text?

function getGreetingMessage() {
    const hours = new Date().getHours();
    if (hours < 12) {
        return "Good Morning";
    } else if (hours < 18) {
        return "Good Afternoon";
    } else {
        return "Good Evening";
    }
}

function getDayOfTheWeek() {
    const days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
    ];
    return `Today is ${days[new Date().getDay()]}`;
}

function getMotivationalThought() {
    const thoughts = ["Stay positive", "Keep going", "You're awesome"];
    return thoughts[Math.floor(Math.random() * thoughts.length)];
}

Now, you can use these functions to render the headlines inside the component.

import { useState } from "react";

const Headlines = () => {
    const pattern = [
        getGreetingMessage,
        getDayOfTheWeek,
        getMotivationalThought,
    ];
    const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{pattern[index]()}</h1>
            <button onClick={() => setIndex((index + 1) % pattern.length)}>
                Next
            </button>
        </div>
    );
};

Have you noticed something? You changed the entire logic of your component. To simplify the logic and keep your components clean, you can use generators.

function* patternGenerator() {
    yield getGreetingMessage();
    yield getDayOfTheWeek();
    yield getMotivationalThought();
}

const pattern = patternGenerator();

Now, you can use this generator to render the headlines inside the component.

import { useState } from "react";

const Headlines = () => {
const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{pattern.next().value}</h1>
            <button onClick={() => setIndex((index + 1) % 3}>Next</button>
        </div>
    );

};

This way, you can keep your components clean and your logic simple. Generators can be used to simplify the logic and give hooks a break.

Generators also abstract the logic behind how the data is generated. Plus, you can easily extend the pattern by adding more functions to the generator or changing the order of the functions without altering the logic inside the component.

To take a step forward you can also create a custom hook to handle the generator logic.

import { useState } from "react";

function useGenerator(generator) {
    const [gen, setGen] = useState(generator());

    return () => gen.next().value;
}

const Headlines = () => {
    const pattern = useGenerator(patternGenerator);

    return (
        <div>
            <h1>{pattern()}</h1>
        </div>
    );
};

This also ensures that the API for the generator remains consistent across components no matter how the logic shifts inside the generator.

Hence, they provide more flexibility and control over the data generation process.

Benefits of using generators:

Simplify component logic with a consistent API and separation of concerns between data generation and rendering.
Enable on-demand data generation to minimize state usage and avoid unnecessary data storage.
Provide fine-grained control and a flexible, extendable approach to data generation.

Points to Remember

Generators are not exclusive to React but are a pure JavaScript feature.
The pause-and-resume functionality of generators makes them memory-efficient.
They do not generate side effects or trigger irregular updates or mutations.

Now I'm in my happy place!

Conclusion

Generators help streamline the process of data serving and separate concerns between data generation and rendering components, offering greater control and flexibility over data generation without compromising performance.

You can also checkout this great talk by Anjana Vakil on Generators in JavaScript.

I hope this article helps you understand where and when to use generators. If you have any questions or feedback, feel free to reach out to me on Twitter.

Originally posted on ashishk1331's blog.

Even a mouse can do i18n

Ashish Khare😎 — Thu, 17 Oct 2024 15:27:38 +0000

Introduction

The mouse saga began when I was searching for repositories to contribute to and discovered Toglee. So, what is Toglee?

Toglee is a localization platform that enables you to translate your application into any language without altering your code.

In simple terms, it facilitates adding local language support to your webpages. The best part is that it also supports machine translations, in-context translations, and manages cache to avoid unnecessary re-translations. Plus, the alt + click feature for translations is incredibly convenient!

Let’s understand Toglee by creating an app that utilizes its features.

Task

Creating a minimal app that convert country names into their respective flag emojis. Users can type a country name and see the corresponding flag emoji.

Process

Reading the prompt instantly sparked an idea for an app where users can see the flags of all countries that share the same prefix as the country name they are typing. For example, if the user types ind, they will see the flags of both India and Indonesia. We can implement this functionality using a simple Trie data structure to store the names of all countries and return the flags of countries with matching prefixes.

Sounds cool, right? It is. 😄

1. Setup

Toglee provides bootstrapped templates to get started, and for this example, I chose the React + ViteJS template. Check the integrations page for more information.
Also, you can follow the Youtube video to setup toglee correctly.

For this project, I didn’t want to waste time perfecting the styles and UI, so I chose Pico CSS to style the app.
"Keep it simple!", they say.

2. Trie

Jumping straight to the point, I created the CountryTrie class to store country names, where each leaf node contains the country code for the fully spelled country.
Read about Tries.

abstract class AbstractCountryTrie {
    children: Record<string, AbstractCountryTrie>;
    countryCode: string;
    isCountry: boolean;

    constructor() {
        this.children = {};
        this.countryCode = "";
        this.isCountry = false;
    }

    // Inserts a country name and its corresponding country code into the trie.
    abstract insert(name: string, code: string): void;

    // Searches for a country by its name and returns the country code.
    abstract search(name: string): string;

    // Finds the best matches for a country based on a partial input.
    abstract bestFind(name: string): string[];
}

The input data is stored as a key-value JSON, where each country name corresponds to its country code. The entire list can be found in the file located at /src/assets/countries.json.

{
    "ascension island": "ac",
    "andorra": "ad",
    "united arab emirates": "ae",
    "afghanistan": "af",
    ...
}

Then, inside the FindCountry component, we create an instance of CountryTrie and populate it with the country names. This same instance will be used to search for countries.

import countries from "../assets/countries.json";
import { CountryTrie } from "../util/countryTrie";

const trie = new CountryTrie();
for (let [country, code] of Object.entries(countries)) {
    trie.insert(country, code);
}

3. Country Flags

The country flags are fetched from the beautiful library flag-icons. With this library, we can easily display flags by adding the class fi or fib to an empty div.

<div className="flag-container">
    {trie.bestFind(countryName).map((code) => (
        <div key={code} className={`flag fib fi-${code}`} />
    ))}
</div>

4. Toglee

Lastly, the star of the show tonight: all labels in the app are rendered using the useTranslate hook from @tolgee/react. Toglee offers on-the-fly translation support, even in production, allowing you to add language translations to labels simply by alt clicking on them.

import { useTranslate } from "@tolgee/react";

export default function Description() {
    const { t } = useTranslate();

    return <p>{t("app-description")}</p>;
}

Later, you can add local-first support for translations by pulling in the translations using the Toglee CLI. Or even better, you can use machine translations to avoid the manual work.

App

By gluing all the pieces together, you create a minimal app that displays country flags based on user input.

Jam[Demo]: https://jam.dev/c/ce894e33-d81a-4b93-9400-9bb97a5352c1
Repo: https://github.com/ashishk1331/tolgee-platform/tree/flag-emoji-converter-ashish/demos/flag-emoji-converter

If you have any questions or if there's something I missed including, feel free to ping me in the comments!

#DEVResolutions2024

Ashish Khare😎 — Wed, 31 Jan 2024 05:56:03 +0000

Professional Goals:

Goal: Write more Rust
Action Steps: Solve more problems using Rust and develop apps.
Timeline:
1. By the end of February, try to pick up the Rust accent
2. After that build a tinyBASIC compiler, light OS and image editor. Probably, in order March, April and May.

Personal Aspirations:

Aspiration: Network more, more!!!
Why it Matters: Because people have not discovered me for all my hard work done up till now.
Support System: Involve more in events and try to be part of conversations.

DEV Community Contributions:

Contribution Goal: Moderate more articles and make DEV a more habitable space.
Collaboration Plans: Heck yeah! Let's build together. Tag me here!
Measuring Impact: The sheer amount of responses will determine my progress.

For collaboration, these are the projects I've built so far.

A card for DEV resolutions

Ashish Khare😎 — Fri, 26 Jan 2024 10:19:59 +0000

TL;DR

Get yourself a card of your #DEVResolutions2024. The image can be shared on Twitter and wherever you like. Maybe have a printout of it and hang it on your refrigerator.

Prologue

I'm worse when it comes to choosing resolutions for a new year. I can't come up with any. I have three emails from DEV marked as important. These emails talk about making resolutions. I can't help it! SOS!
However, I can code well. Hence, I came up with the idea of having personal cards engraved with individual resolutions that can be shared on social media.
I have experience using NextJS and Satori to generate images previously. But it suffers greatly in terms of performance as for every change in prompt there is a network req-res cycle from an API endpoint. Maybe I could've used wasm binaries of Satori to generate images on the client side.
This time I chose html2canvas library.

Setup

The setup for the project is fairly minimal. The project is based on NextJS for foundation and Tailwind CSS for styling. Note: The form is imported from Preline UI. There are three goal input boxes which are wired using the React state to the card. Changing the prompt would change the text on the card.
Next, comes the submit button which calls the function which saves the card as an image.

Tip

While using html2canvas library, there is a problem with vertical text alignment. This can be easily solved by adjusting the image's CSS in the core CSS file.

@layer base {
  img {
     @apply
       inline-block;
  }
}

ref: https://stackoverflow.com/questions/74980740/html2canvas-shifting-text-downwards

Conclusion

Try it out and share your cards on Twitter tagging me and DEV.

References

repo: https://github.com/ashishk1331/DEVResolutions2024
demo: https://dev-resolutions2024.vercel.app/
issues: https://github.com/ashishk1331/DEVResolutions2024/issues/new

DEV Community: Ashish Khare😎

Prompts should live outside.

TL;DR

Preachings of Dan Abramov

The clsx for templating

The .prompt files and loader

Other options on the shelf

Conclusion

Use generators for magic in React

TL;DR

What are generators?

Headline Example

Benefits of using generators:

Points to Remember

Conclusion

Even a mouse can do i18n

Introduction

Task

Process

1. Setup

2. Trie

3. Country Flags

4. Toglee

App

#DEVResolutions2024

Professional Goals:

Personal Aspirations:

DEV Community Contributions:

A card for DEV resolutions

TL;DR

Prologue

Setup

Tip

Conclusion

References

The `clsx` for templating

The `.prompt` files and loader