DEV Community: Amit Mondal

Building Amit.AI, Part 2: The Backend

Amit Mondal — Mon, 19 Oct 2026 09:03:45 +0000

tldr:

No vector database. The whole knowledge base is about 3.3k tokens, so I send all of it every time.

The prompt does the heavy lifting: grounding, scope, and a refusal to upgrade "contributed" to "led".

A small gateway tries models in order, but only switches before the first token.

FastAPI and Pydantic make a typed, validated streaming API feel a lot like TypeScript with Zod.

Part 1 was the browser. This is the other half: a small FastAPI service that answers questions about me, as me, from facts I wrote down.

Same rules as before: no keys, no limits, no secrets, just the interesting decisions.

Here is the whole trip of one question again. This post covers everything from the BACKEND box down:

viewer.diagrams.net

1. Python, for the TypeScript brain

I write Python and TypeScript, and this service sits right on the overlap. If you come from JS/TS, here's the map I'd hand you for the pieces that show up in this project:

Python	JS/TS equivalent
`ContextVar`	`AsyncLocalStorage`
`Protocol`	a TypeScript `interface`
`pydantic` models	`zod` schemas
`logging`	`pino`
`uv`	`pnpm`, but faster

FastAPI plus Pydantic is a great fit for this kind of service. A route is a typed function, request validation reads almost like a Zod schema, and async streaming is a generator that yields chunks. The framework does the rest.

2. No vector database

Every AI tutorial wants you to chunk your documents, embed them and store them in a vector DB. I came very close to building all of it.

Then I counted. My whole professional background, as Markdown, comes to about 3.3k tokens. That fits in a prompt with room to spare.

So the "retrieval" step is: read every file at startup, glue them together, and put them in the system prompt on every request. The model sees everything, which makes it more accurate than retrieval would be, because there are no retrieval misses.

knowledge/
├── profile.md
├── experience.md
├── projects.md
├── skills.md
└── education.md

A few details I'm happy with:

Files are loaded once at startup, not per request.
Years of experience aren't hardcoded. The files contain a placeholder like {years_since:YYYY-MM} that gets resolved to a number when the server starts, so my "years of experience" never goes stale.
The loader sits behind a small interface, so swapping in real retrieval later changes one file. The trigger for that is clear: when I start writing long blog posts and want the bot to know them. Writing these posts is slowly walking me towards the thing I skipped.

Cutting scope felt like cheating at first. It wasn't. Every component had to earn its place.

3. The prompt is where the work is

The system prompt does the job a lot of code usually does. The knowledge goes first in a delimited block, then the rules. Without quoting it, here is what it covers:

Identity. It speaks as me, in first person, but admits it's a virtual version if asked directly. It must never pretend a human is typing live.
Pronouns. "What's his stack?" means "your stack", because on this site there is only one "he".
Grounding. Answer from the knowledge block only. If it isn't there, say so plainly and point to the contact page.
No promotions. This is my favourite rule. The model must not upgrade my verbs. If my notes say I "contributed", it can't say I "led". LLMs love flattering their subject, and I don't want a chatbot with a better résumé than mine.
Scope. Only my professional background. No homework, no trivia, no "write me a poem about React hooks".
Style. Short, plain text, no markdown, no emojis, answer first.

Two lessons from tuning it:

Rules need examples. "Say you don't know" made the model too eager to give up on questions it could answer. Telling it to check related facts first (for a relocation question, answer from my location and job preferences) fixed that.
Format instructions can sneak around scope. If someone asks for something out of scope "as a table", the model may decide the table makes it fine. So the prompt says outright that a requested format never widens the scope.

4. Don't trust the prompt alone

A prompt is a polite request. I'd rather not build security on politeness.

The server runs its own checks before the model is ever called:

Strict request validation. Message count, message size and total size are capped, and the roles a client may send are limited, so nobody can sneak in a "system" message. Pydantic validators make this almost boring.
Guards that run before the LLM. Obvious jailbreak phrasing and requests for private details get a canned reply, and the model never sees them. Cheaper, faster and more reliable than asking it nicely to refuse.
Rate limiting, an origin allowlist and a budget mindset, because anything that calls a paid or free-tier model needs a seatbelt.

None of this is exotic. The point is layering: input checks, then guards, then the prompt, with the model as the last line of defence rather than the only one.

5. A gateway for free-tier reality

I'm running on free tiers. The thing nobody tells you is that the daily token limit, not the request limit, is what you hit first.

The math was sobering. Each request carries the full knowledge base plus instructions plus history, so it's a few thousand tokens. A free model's daily token allowance divided by that is a surprisingly small number of conversations per day. This is also why Tier 0 matters so much: every FAQ answer served locally is a call I didn't spend.

This is also why the front of the funnel matters. Here is a short video on how many questions actually reach the model:

So I built a small gateway that holds an ordered list of models and tries them in sequence:


async def stream(self, messages):
    for provider in self.providers:
        if self.is_cooling(provider):
            continue

        started = False
        try:
            async for chunk in provider.stream(messages):
                if not started:
                    started = True
                yield chunk
            return
        except UpstreamError as error:
            if started:
                raise  # tokens already reached the user, can't switch now
            self.record_failure(provider, error)

    raise UpstreamError("All LLM providers failed or are cooling down")

Three ideas in there:

Fall back only before the first token. Once a word has streamed to the visitor, you can't swap models mid-sentence. After that, the stream just ends with an error.
Cooldowns. When a model answers "slow down" (HTTP 429), it goes on a skip list for as long as it asked, so I stop hammering it.
Every provider speaks the same dialect. They're all OpenAI-compatible endpoints, so one small class talks to all of them, and changing a model is a config change, not a code change.

Two surprises worth sharing:

Hidden "thinking" counts against your token cap. One fallback model burned its entire output allowance on invisible reasoning and stopped after a few words. Those models now get more headroom, and the answers stay short because the prompt asks for it.
A truncated answer is an error, not a result. If the model gets cut off by the token limit, that counts as a failure. It is never cached, and before the first token it triggers the next model.

6. Caching, but only where it's safe

Repeat questions are common ("what's your stack?"), so there's a small in-memory cache. It's a bounded LRU with an expiry, keyed on the lowercased, whitespace-collapsed question.

The rule that matters: only first-turn questions are cached. Later turns depend on the conversation, so "tell me more" must never get a stale answer from someone else's chat. Only complete answers are stored, and guard replies and errors never are.

One tiny detail I like: the answer is stored before the final "done" event is sent. If a client disconnects right after the last token, the generator can be closed before the next line runs, and the cache write would be lost.

7. Seeing what happens

Each request ends with a single structured log line: outcome, which model answered, total latency, time to first token. Visitor IPs are hashed, so I can spot one noisy client without storing who they are.

Which model answered a given request is tracked with a ContextVar. The gateway is shared by every request, so it can't just store that on itself. It's the same problem AsyncLocalStorage solves in Node, so if you've met one, you've met the other.

What I'd tell past me

Count your tokens before you reach for a vector database. Mine fit in a prompt.
Defer instead of guessing, on both the matcher and the model.
Put cheap checks in front of expensive calls. Guards, the matcher and the cache all exist to save a model call.
Free tiers are a design constraint. The gateway, the cache and the matcher exist because of them, and the architecture got better for it.
Write the "what I deliberately did not build" list. Mine has a written trigger for each item. It stops you gold-plating.

Still on the list: evals for the answers, tracing, and shared rate limits. Probably the next post.

Go try it. Ask it something about me. Then try to break it. I'd genuinely like to know what you find.

Building Amit.AI, Part 1: The Frontend

Amit Mondal — Sat, 17 Oct 2026 03:34:43 +0000

tldr:

Most questions never reach an LLM. A tiny client-side matcher answers them instantly, and when it is unsure, it stays quiet and defers.

Wrong-but-confident is worse than slow-but-right, so every threshold is tuned to defer.

SSE over POST needs fetch and a hand-rolled parser, because EventSource cannot POST.

A sleeping free-tier backend is handled with a warm-up ping during the boot animation, which is also why the boot animation exists.

Go to the chat page and you are talking to me, in terminal form. This is Part 1 of how I built it: the browser side. Part 2 covers the server.

I'll skip the secrets and the exact knobs. This is the fun-parts tour, not a blueprint.

1. The best LLM call is the one you don't make

My first version of Amit.AI was a static FAQ matcher. No AI, just "if the question looks like this, show that answer". It was fast and free, and also confidently wrong in creative ways.

Then I added a real LLM backend, and the obvious move was to send everything to it. I didn't, for three reasons:

Free-tier LLM quotas are small, and visitors keep asking "what do you do?" and "are you available?"
The backend sleeps when nobody is around. A FAQ answer doesn't need it awake.
Instant answers feel better than streamed ones.

So the chat is two tiers. Tier 0 lives in the browser and answers what it is sure about. Everything else gets handed to the backend, which checks its own cache before it spends a model call, and tries a fallback model if the first one fails. Here is the whole trip of one question:

viewer.diagrams.net

This post covers the first box.
Part 2 covers everything below it.

Basically a tiny, free intent router

Looking back, the Tier 0 matcher is a poor man's intent router: a cheap first stage that decides what to do with a message before an expensive LLM gets involved.

There are real, proper versions of this idea:

Jev from TypeSafe AI is pitched as a model for decisions inside software rather than chat. You ask it a structured question, and it returns a typed decision with a probability, so your code can act when confidence is high and escalate when it's low.
Laya is an open-source (Apache-2.0) "System 1" decision engine that doesn't generate text at all. It answers choice, score and yes/no questions about a piece of text, and ships presets for routing and prompt guardrails.

Mine is kind of in the same shape with none of the ML. No model, no training, no GPU, just a token-overlap score, a few thresholds and a JSON file. It runs in the visitor's browser for free. The "confidence" is whether a message clears the gates below, and low confidence means "send it to the big model".

It's much dumber than either of those, and it's also ₹0 and instant. For a portfolio chatbot with a few dozen FAQ topics, that trade is fine.

2. A matcher that knows when to shut up

The matcher returns one of three things: guard, faq or defer. There is deliberately no fourth "I'm not sure" answer. A defer is silent. The visitor just sees the typing indicator a little longer.

The first version used one similarity threshold, and it failed in a way I found hilarious. Ask "How good are you at Java?" and it happily returned my React answer, because the other words overlapped.

The fix was to stop trusting a single score. An FAQ answer only goes out when it clears every gate:

An exact phrasing match always wins.
Otherwise, most of the visitor's content words must be covered by one FAQ phrasing, so "Java" can't hide behind "good" and "you".
At least two meaningful words must overlap.
The winner must beat the runner-up by a clear margin. Two close candidates mean the matcher is guessing, so it defers.

Words like "that", "more" and "those" force a defer on any turn after the first, because the matcher has no memory. "Tell me more" means something different every time.

My rule while tuning: wrong-but-confident is worse than slow-but-right. Every change I made pushed towards deferring.

The stopword rabbit hole

A stopword is a filler word the matcher ignores when scoring, like "what", "are", "the" or "you". Only the remaining content words count towards the overlap and coverage gates above.

Here's the problem. My FAQ is written in the second person, because the terminal is me: "What are your skills?" But visitors don't know that. They look at a site about a person called Amit and ask "what are his skills?" or "what is Amit's stack?".

Walk through the first one:

The FAQ phrasing "what are your skills" reduces to one content word: skills. ("what", "are" and "your" are all stopwords.)
The visitor's "what are his skills" reduces to his and skills, because his wasn't a stopword.
Only one of the visitor's two content words is covered, so coverage is 0.5, below the 0.7 gate. The matcher defers, and a question it should have answered instantly goes to the LLM.

The fix was to add his, him, her, their, amit and mondal to the stopword list. They carry no meaning on a site about exactly one person, so they should be invisible to scoring. Now both phrasings reduce to skills, and it's an instant answer.

There's a flip side. Pronouns like "it", "that" and "those" normally mean "I'm pointing at something said earlier", which is why they force a defer. But "he" and "his" are different here. On this site they can only mean me, so I deliberately left them out of that list. A question like "what are his skills?" is standalone, even though it contains a pronoun.

Small things like this are the difference between a matcher that works in a demo and one that works for strangers.

Here is that funnel as a short video: how many questions actually reach the LLM.

3. Streaming without EventSource

The backend streams its answer as Server-Sent Events, so tokens appear as they are generated. Browsers have a built-in EventSource for this, but it can only make GET requests, and I need to POST the conversation.

So I used fetch and read the body stream myself. The core is about a dozen lines:

const reader = res.body.getReader();
const decoder = new TextDecoder();
let buffer = '';

while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  buffer += decoder.decode(value, { stream: true }).replace(/\r\n/g, '\n');

  let sep: number;
  while ((sep = buffer.indexOf('\n\n')) !== -1) {
    const frame = parseFrame(buffer.slice(0, sep));
    buffer = buffer.slice(sep + 2);
    // token → append to the bubble, done → resolve, error → throw
  }
}

SSE frames are separated by a blank line, and a network chunk can end in the middle of one. So you buffer, split on \n\n, and keep the leftover for the next read. That one detail is where most hand-rolled parsers break.

There are three event types: token, done and error. The UI pushes an empty AI bubble on the first token and appends to it. The typing indicator stays up until that first token arrives, so the wait never looks like a freeze.

One safety habit: the message text is rendered with {{ }}, never v-html. Model output is untrusted input, and I'm not letting a chatbot inject HTML into my own page.

4. The sleeping backend

My backend runs on a free tier that goes to sleep when idle. The first request after a nap can take a long time.

I handled it in layers:

Tier 0 covers the common stuff. Most visitors never notice the backend is asleep.
A warm-up ping. The moment the chat page loads, the browser quietly pings the backend's health endpoint. By the time you have typed a question, it's often awake.
A generous first-token timeout, then an overall timeout. After that, a friendly offline message instead of a spinner of doom.

The boot animation (those fake > initializing... lines) exists partly because it looks cool, and partly because it buys the ping a few seconds. I'm not going to pretend I planned that first.

5. Guardrails, on both sides

A guardrail here is a cheap pattern check that runs before any answer is produced. If a message looks like something the chat shouldn't engage with, it gets a canned reply, and neither the FAQ nor the LLM ever sees it. There are two kinds:

Jailbreak-style messages, like "ignore all previous instructions" or "pretend you are...". The reply politely says this terminal is scoped to my professional profile.
Requests for private details, like a phone number, home address or date of birth. The reply says that isn't shared here and points to the Contact page.

The same idea exists twice, for different reasons:

Where	Job	Why it's there
Browser	Speed	A blocked message gets its reply instantly, with no network request and no waiting for a sleeping backend.
Server	Enforcement	Anyone can skip my UI and call the API directly. Code running in a browser is a convenience, never a security boundary, so the server re-checks everything and has the final say.

So the frontend copy makes the common case fast and nice, and the backend copy is the one that actually protects anything. If they ever disagree, the server wins.

The hard part wasn't writing patterns, it was not blocking innocent questions. My first versions were too blunt:

A bare number blocked "what's the number of projects you've built?"
A bare address blocked "how did you address performance issues?"
A bare dob matched inside "A*dob*e".

The fix is two rules: always use word boundaries (\b), and match the phrase, not the word. "phone number" and "home address" are the requests I care about, "number" and "address" alone are not. A guardrail that annoys real recruiters is worse than no guardrail, so when in doubt I let the message through to the server and the prompt, which are better at judging context.

6. Small touches that earn their keep

A frontend answer cache. If you ask the same question twice in a tab, the second answer comes from sessionStorage and never leaves the browser. Storage can throw or be blocked, so an in-memory Map is the source of truth and storage is a bonus.
History trimming. Only the last few turns go along with each deferred message. If you ask the same question twice, only the latest pair is kept, so the model isn't fed its own repeats.
A fake thinking pause on locally answered messages. Replying in 5ms feels wrong, and a short, slightly random delay feels more human. It is a lie, and I'm at peace with it.
A character counter ring on the input that fills as you approach the message limit, so the backend never has to say no.

What's next

That's the browser half. The interesting questions are on the other side: how do you ground an LLM on a bio without a vector database, what happens when the free model hits its limit, and how do you stop people making me say silly things?

That's Part 2.

React router Lazy load route components

Amit Mondal — Sun, 18 Sep 2022 13:11:28 +0000

Performance optimization is the key to having an efficiently functional application and is done by monitoring and analyzing various metrics of an application and identifying ways to improve it. One of the most fundamental and important ways is to lazily load the routes/pages based on user requirements and not fetch the whole chunk at the beginning which can lead to a high load time of the page that results in an increase in user dropoff number.

For best practice, web developers code split large bundles into smaller ones because it enables them to lazy load files on demand and improves the performance of the React application. In this post, we’ll look at how to split our code based on routes using React Router. The idea is simple, don’t download code until the user needs it. The below example is just a simple boilerplate example. In practice, it can be a little more complicated.

Enough of Theory let's dive in...

Install the dependency:

yarn add react-router-dom@6

Wrapping App component:

Import BrowserRouter from react-router-dom near the top of your file and wrap your in a so that all the necessary routing methods are available across your application.

File: main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Creating routes config:

This config will hold all the necessary mapping for our routes like route name, element/component to load lazily, and path. Here we are using useRoutes hook, it is basically the functional equivalent for <Routes>.

File: routes/index.ts

import { useRoutes } from 'react-router-dom';
import { lazyLoadRoutes } from './LazyLoadRoutes';

export function RouterElement() {
  const routes = [
    {
      path: '/',
      name: 'Home',
      element: lazyLoadRoutes('Home'),
    },
    {
      path: 'about',
      name: 'About',
      element: lazyLoadRoutes('About'),
    },
    {
      path: 'services',
      name: 'Services',
      element: lazyLoadRoutes('Services'),
    },
  ];

  return useRoutes(routes);
}

Lazy load component:

As the name says the main purpose of this component is to lazily load the mentioned component. First we lazy load the mentioned component using React.lazy, we wrap around React.Suspense with the fallback text(this can be a loader component as well). Please note that we can tweak the function component so that it takes the path and not just the component name.

File: routes/LazyLoadRoutes.tsx

import { lazy, Suspense } from 'react';

/**
 * Lazily load the mentioned component which resides in the page directory
 * This method will be used in routes so that the files are loaded only
 * When users are on that route
 */
export function lazyLoadRoutes(componentName: string) {
  const LazyElement = lazy(() => import(`../pages/${componentName}.tsx`));

  // Wrapping around the suspense component is mandatory
  return (
    <Suspense fallback="Loading...">
      <LazyElement />
    </Suspense>
  );
}

Navigation bar for route redirection:

Creating navigation route for our pages which are Home, About and Services.

File: App.tsx

import { Link } from 'react-router-dom';
import { RouterElement } from './routes';
import './App.css';

function App() {
  return (
    <div className="App">
      <nav>
        <Link to="/">Home</Link>
        <Link to="about">About</Link>
        <Link to="services">Services</Link>
      </nav>
      <RouterElement />
    </div>
  );
}

export default App;

Working Example Link:

As you can see below the chunk for About and Services loads only when we visit that route and the chunk gets cached in the browser so that it is not fetched again in the same session.

Do let me know if there are any other nifty ways in the comments below.
Thanks for your time reading. Drop a few ❤️ or 🦄 if you liked it.

Dynamic SVG component in Vite + React + TS

Amit Mondal — Wed, 07 Sep 2022 12:10:19 +0000

After hearing many amazing things about vite I decided to try it and create something and I am not at all disappointed with the DX. So when I was developing this fun project of mine (which is currently WIP) I thought of creating a dynamic SVG component that would load up just by giving the SVG icon name with all the SVG customizable attributes under my control.

The first hurdle was to find a plugin that can transform SVG to React component just like we have in CRA. After a few google searches landed on vite-plugin-svgr.

Install vite-plugin-svgr:

If you are using CRA for your React project then this step can be skipped as it configures SVGR(SVGR lets you transform SVGs into React components) under the hood for you.

To install the plugin run:

yarn add -D vite-plugin-svgr

Setting up vite-plugin-svgr:

File: vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr"; // transform svg to react component

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()], // register the plugin
});

Writing the custom hook:

Once SVGR setup is done we are ready to create the functionality that will grab the icon-name and fetch it from assets and load the same. We can also modify the hook so that it can take the icon's path and load it. From this hook, we export the loading state, error state, and the component itself.

File: useDynamicSvgImport.ts

import React, { useEffect, useRef, useState } from "react";

export function useDynamicSvgImport(iconName: string) {
  const importedIconRef = useRef<React.FC<React.SVGProps<SVGElement>>>();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    setLoading(true);
    // dynamically import the mentioned svg icon name in props
    const importSvgIcon = async (): Promise<void> => {
      // please make sure all your svg icons are placed in the same directory
      // if we want that part to be configurable then instead of iconName we will send iconPath as prop
      try {
        importedIconRef.current = (
          await import(`../../assets/icons/${iconName}.svg`)
        ).ReactComponent; // svgr provides ReactComponent for given svg path
      } catch (err) {
        setError(err);
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    importSvgIcon();
  }, [iconName]);

  return { error, loading, SvgIcon: importedIconRef.current };
}

Writing the component:

Let's write the wrapper component for our SVG, main aim of this wrapper is to provide the loading shimmer when the icon is not present to be displayed and apply some wrapper style and SVG attributes.

File: SvgIcon.tsx

import { useDynamicSvgImport } from "./useDynamicSvgImport";

interface IProps {
  iconName: string;
  wrapperStyle?: string;
  svgProp?: React.SVGProps<SVGSVGElement>;
}

function SvgIcon(props: IProps) {
  const { iconName, wrapperStyle, svgProp } = props;
  const { loading, SvgIcon } = useDynamicSvgImport(iconName);

  return (
    <>
      {loading && (
        <div className="rounded-full bg-slate-400 animate-pulse h-8 w-8"></div>
      )}
      {SvgIcon && (
        <div className={wrapperStyle}>
          <SvgIcon {...svgProp} />
        </div>
      )}
    </>
  );
}

export default SvgIcon;

Using component:

Now the component is ready to be used with all the SVG element attributes and wrapper styles that can be passed on as a prop.

File: App.tsx

import './App.css';
import SvgIcon from './SvgIcon';

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <SvgIcon
        iconName="react"
        svgProp={{ width: 100, height: 100, fill: "#61dafb" }}
      />
      <SvgIcon iconName="react" svgProp={{ stroke: "white", fill: "blue" }} />
    </div>
  );
}

export default App;

Working example link:

Do let me know if there are any better ways in the comments below.
Thanks for your time reading. Drop a few ❤️ or 🦄 if you liked it.

State of Vue.js in 2021

Amit Mondal — Fri, 16 Apr 2021 20:33:19 +0000

Vue is an open-source progressive framework that is designed to be incrementally adoptable, as the core library is focused around the view layer only. That being said it's more than capable of powering sophisticated Single Page Applications, Mobile Applications, and Desktop Applications with the help of modern tools. Unlike Facebook's React.js or Google's Angular.js, Vue.js is developed and financed solely from donations.

Since its initial release in 2014 Vue has seen a large growth as it becomes popular among the web development industry this is because it offers some nice benefits when compared to other frameworks.

Few points on why you should try Vue.js:

Reactivity:
This is Vue's one of the most distinct features. Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner, this means that when you set a variable in Vue it will automatically update the user interface which in return makes state management simple and intuitive. Since Vue automatically updates the component this means the system knows precisely which components actually need to be re-rendered when the state changes. With the release of Vue 3, we now have even more control over the underlining reactivity system that powers Vue due to which removes the need for a whole class of performance optimization from the developer's plate and allow them to focus more on building the application itself.
Scalability and Flexibility:
Vue is extremely flexible and scalable and it can be used for large applications as well as for small interactive parts to be integrated with different technology, in other words, it could be anything you need it to be either just a library in your project or a fully-featured framework used to build an entire product.
Standardized tools:
Before I started using Vue I would frequently get frustrated with the number of choices I had when creating a project Vue provides official support for several essential add-ons including Vue-router for client-side routing, Vuex for state management, Vue test utils for unit testing, Vue devtools browser extension for debugging and Vue CLI for creating project boilerplate and are the recommended defaults.
Developer Experience:
Developers love Vue.js not just because it's a great technology but because it was made with them in mind. Vue CLI mentioned in the above point, which is a handy tool for creating a Vue project using whatever tools you choose from the CLI. The CLI is much more flexible compared to similar offerings from competitors and provides a lot of pre-configured steps additionally there is a GUI available for the same.
Other factors devs love about Vue.js:
- Easy learning curve (This allows newcomers to quickly catch on with just HTML, CSS, and JS knowledge)
- Intuitive API
- Elegant programming style and patterns
- Good documentation
- Fast Performance
Composition API:
Vue 3 now offers the Composition API. It is new to interact with the Vue's reactivity system, it provides some major benefits over the Options API:
- It allows to extract common use cases into reusable functions and then call them in different components a nice example of this is the Vue use library which provides some common composition functions you would need when building any type of application.
- It allows for easy separation of concern this means we can group common operations together that are related, this way when a developer comes to look at the code they know exactly where to find what they are looking for unlike mixins from Vue 2.
Popularity:
With 182K Github stars(while writing this post), Vue is inarguably the most popular JavaScript framework. Many well-known companies have web apps made with Vue.js.
Vue users include: Gitlab, Trivago, Euronews, Adobe Portfolio, Behance, Alibaba, Trustpilot, Vice, Nintendo, BMW, Louis Vuitton, Zoom, UpWork, Google(they use Vue for their career page), and many other companies started to use Vue.js.

Conclusion:
Overall I really enjoy working with Vue.js when it comes to building an interface I spend less time wrestling with configuration APIs and worrying about re-renders that I actually get to spend time on the things I enjoy. So if you are considering creating a new project and you don't know which framework to use then I highly recommend Vue.js and I hope the reasons that we went over helps reinforce what I am trying to say.

Thanks for your time reading. Drop a few ❤️ or 🦄 if you like it.

React Stack 2021

Amit Mondal — Sun, 04 Apr 2021 16:15:43 +0000

Over the last few years, there have been some big changes in React itself, and the ecosystem has evolved quite a bit too.

Here’s where things stand in 2021.

React:
Well isn't that obvious, since we are talking about the React Stack after all. We all know how React has seen a rise in popularity to become one of the most loved front-end frameworks of all time. This also means more developers are building projects in React than ever before.
TypeScrpt:
TypeScript is a typed superscript of JavaScript that compiles to plain Javascript, by using React and TypeScript together we get the benefit of statically typed language for the user interface and also lowering the probability of shipping and bugs to the front-end.
React Router:
React Router is still the dominant router when building medium to large scale Single Page Applications. It is currently up to v5 (almost v6) and the API has changed a bit since earlier versions.
Redux:
State management libraries help us to manage the data in our application. The new official Redux Toolkit is excellent and is the recommended approach to use Redux in 2021. If you are going to use Redux, be sure to check those out.
Other alternatives available MobX, Recoil and also using React hooks (useContext + useReducer)
React Query:
On the data-fetching front, the strategy of putting everything in Redux or a global store is getting less common. React Query does a good job at fetching data and managing loading/success/error states and we can definitely use both Redux and React Query in the same project. It takes care of maintaining that global data cache across component boundaries without you really having to think about it. Definitely worth a look if you are working with a lot of async data fetching.
Chakra UI:
Chakra UI has an abundance of components and works with the styled system approach which I personally prefer. Another alternative Material UI. Using a component library is a personal choice.
React Forms:
Formik and React Hook Form seem to be the favorites right now, with hook-form gaining steam. Both supports schema-based form validation with Yup where you can pass your schema as an optional config. The form will validate your input data against the schema and return with either errors or a valid result. Formik or React Hook For with Yup validation library is definitely a swiss knife for all things related to forms in React.
Jest + React Testing Library:
When it comes to testing I personally prefer Jest with React Testing Library as my go-to packages and they are in fact recommended by the react official documentation. What is great about react-testing-library is that it encourages you to write tests that resemble the way the users would interact with your software this helps you avoid implementation details.
Storybook:
Storybook is basically a development environment and playground for UI components. It enables you to create components independently and showcase those components interactively in an isolated development environment. When working on projects storybook allows the front-end team to show the components to the stakeholders.
Next.js:
Next Js is a React framework that gives an excellent developer experience with all the features that you would need to build a fantastic application, there is hybrid, static and server-side rendering, Optimized SEO, image caching, TypeScript support, built-in routing, API conventions, and a lot more. It might probably be most if not every React project might be built in the coming years.

Do let me know if I have missed some of them in the comments below.
Thanks for your time reading. Drop a few ❤️ or 🦄 if you like it.

JavaScript Internationalization

Amit Mondal — Sat, 29 Aug 2020 16:47:44 +0000

Intl is a powerful object that exposes the JavaScript Internationalization API.
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. I won't be mentioning all but a few which caught my attention and can be handy.

1) Convert digits into currency:

new Intl.NumberFormat('en-IN', {
  style: 'currency',
  currency: 'INR',
  minimumFractionDigits: 0
}).format(1150000); // "₹11,50,000"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0
}).format(1150000); // "$1,150,000"

new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY',
  minimumFractionDigits: 0
}).format(1150000); // "￥1,150,000"

2) Convert Digits to Compact(rounding with notation):

new Intl.NumberFormat(undefined, {
  notation: 'compact'
}).format(1150000); // "1.2M"

new Intl.NumberFormat(undefined, {
  notation: 'compact'
}).format(11500); // "12K"

3) Format Date to mentioned locale prefers:

const date = new Date();
dateTimeFormatter = new Intl.DateTimeFormat('en-IN');
dateTimeFormatter.format(date); // "29/8/2020"

dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.format(date) // "8/29/2020"

/*The formatToParts() method returns an array with all the date parts:*/
const date = new Date()
const dateTimeFormatter = new Intl.DateTimeFormat('en-IN')
dateTimeFormatter.formatToParts(date)
/*
[
  {
    "type": "day",
    "value": "29"
  },
  {
    "type": "literal",
    "value": "/"
  },
  {
    "type": "month",
    "value": "8"
  },
  {
    "type": "literal",
    "value": "/"
  },
  {
    "type": "year",
    "value": "2020"
  }
]
*/

4) Plural Rules Formatting tells you which form applies based on a given number for a specific locale:

const pr = new Intl.PluralRules('en-US', {
    type: 'ordinal'
})
pr.select(0) //other
pr.select(1) //one
pr.select(2) //two
pr.select(3) //few
pr.select(4) //other
pr.select(10) //other
pr.select(22) //two

// Every time we get other, we translate that to th. If we have one, we use st. For two we use nd. few gets rd.
const suffixes = {
  'one': 'st',
  'two': 'nd',
  'few': 'rd',
  'other': 'th'
}

const format = (number) => `${number}${suffixes[pr.select(number)]}`

format(0) //0th
format(1) //1st
format(2) //2nd
format(3) //3rd
format(4) //4th
format(21) //21st
format(22) //22nd

Everything in JavaScript is not an Object

Amit Mondal — Sun, 24 May 2020 11:26:55 +0000

It is a very common misbelief or misstatement that "everything in JavaScript is an object" in the JavaScript world. Objects definitely are the general building blocks in which JavaScript is built on but that does not mean that everything is an object.

JavaScript has two main kinds of values: Primitive and Object. Primitive values are immutable whereas Objects are mutable.

The following values are primitive:

string: "Amit"
number: 10, 3.57 (all numbers in JavaScript are floating-point)
boolean: true, false
null: Assignment value that means "no value". Usually explicitly assigned. Many of us might have encountered typeof null returning "object" but this is a well-known bug in JavaScript that can’t be fixed because it would break existing code. That does not mean that null is actually an object
undefined: Javascript sets unassigned variables with a default value of undefined.

All other values are objects. Objects can be partitioned further:

Wrappers for primitives: Boolean, Number, String. Rarely used directly.
Creatable by literals. The following literals produce objects that can also be created via a constructor. Use literals whenever you can.
- Array: [] is the same as new Array()
- Object: {} is the same as new Object()
- Function: function() {} is the same as new Function()
- RegExp: /\s*/ is the same as new RegExp("\s*")
- Date: new Date("2011-12-24")
- Error: Usually you create an Error object with the intention of raising it using the throw keyword. throw new Error('Whoops!').

These built-ins have the appearance of being actual types or even classes. But in JavaScript, these are actually just built-in functions.

var strPrimitive = "This is a string";
typeof strPrimitive;  // "string"
strPrimitive instanceof String;  // false

var strObject = new String("This is a string");
typeof strObject;  // "object"
strObject instanceof String;  // true

In the above code-snippet the primitive value "This is a string" is not an object, it's a primitive literal and immutable value. To perform operations on it, such as checking its length, accessing its individual character contents, etc, a String object wrapper is required.

Luckily, the JavaScript automatically coerces a "string" primitive to a String object wrapper when necessary, which means you almost never need to explicitly create the Object form.

Now consider,

var strPrimitive = "My name is Amit";

console.log( strPrimitive.length ); //15

console.log( strPrimitive.charAt( 11 ) ); //"A"

In both the console statements, we call a property or method on a string primitive, and the engine automatically coerces it to a String object, so that the property/method access works. Similarly, we have object wrapper for number and boolean. null and undefined have no object wrapper form, only their primitive values.

So going forward if someone says "everything in javascript is an object" just politely explain to them why that's not true or just share this post with them.
But yes you can always say that "Most of them are objects but not everything"

I would highly recommend everyone to read You Don't Know JS by Kyle Simpson. Before reading this book I was one of them who thought "Everything in JS is an Object".

Thank you for reading.

Handy Javascript Tricks ✨

Amit Mondal — Sat, 09 May 2020 20:22:18 +0000

In this article 📝, we will look at some JavaScript tricks that can be handy.

While many of these tricks are handy in any context, a few of them may be better suited for code golf than production-level code, where clarity is often more important than concision. You are the best judge of that! 😄

In no particular order, here are a few neat ways to write concise and more performant code.

Copy and paste the code snippets in your browser's console to see the output.

1) Swap two values:

let num1 = 10;
let num2 = 20;
[num1, num2] = [num2, num1];

2) Array Flatten:

// Flatten one level:
const array = [1, [2, [3]]];
array.flat();

// Flatten the array recursively:
array.flat(Infinity);

3) When we want to use javascript object as a hash map(purely for storing data), you might want to create it as follows.

const dirtyMap = {};
const cleanMap = Object.create(null);

dirtyMap.constructor    // function Object() { [native code] }

cleanMap.constructor    // undefined

4) Removing Duplicate value and occurrence from an array:

// Time complexity O(n²)
const duplicateValues = [1,2,2,3,6,4,1,4,3,5,2];
duplicateValues.filter((num,i,arr) => arr.indexOf(num) === arr.lastIndexOf(num))

// Time complexity O(n)
const duplicateValues = [1,2,2,3,63,6,4,1,4,3,5,2];
const counter = {}

duplicateValues.forEach(num => {
  if (counter[num]){
    counter[num] += 1
  } else {
    counter[num] = 1
  }
})

Object.keys(counter).forEach(key => {
    if (counter[key] !== 1) {
        delete counter[key]
    }
});

const removedDuplicates = Object.keys(counter);

5) Get unique values from an array:

const repeatedValues = [1,2,2,3,4,1,4,3,5,2];
const uniqueValues = [... new Set(repeatedValues)];

6) Sorting in JavaScript:

// Sort number in ascending order
unsortedArr = [5,6,2,4,1,8,0,-3,-6,-1,45]
unsortedArr.sort((num1, num2) => num1 - num2);

// Sort number in descending order
unsortedArr = [5,6,2,4,1,8,0,-3,-6,-1,45]
unsortedArr.sort((num1, num2) => num2 - num1);

// Sort string in ascending order
unsortedArr = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 
'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter']
unsortedArr.sort();

// Sort string in descending order
unsortedArr = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 
'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter']
unsortedArr.sort().reverse();

// Sort string length in ascending order
unsortedArr = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 
'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter']
unsortedArr.sort((str1, str2) => str1.length - str2.length);

// Sort string length in descending order
unsortedArr = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 
'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter']
unsortedArr.sort((str1, str2) => str1.length - str2.length).reverse();

// Using localeCompare() enables case-insensitive sorting for an array in ascending order.
unsortedArr = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
unsortedArr.sort( (a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true}));

7) Setting CSS using JavaScript in object form:

const event_type = document.createElement('span');
Object.assign(event_type.style, {
   fontWeight: 'bold',
   display: 'inline-block',
   width: '128px',
   paddingLeft: '10px',
   paddingRight: '10px',
   color: eventName === 'text-change' ? '#22d' : '#8af', //conditionally assign value
 });

8) Using document.createDocumentFragment():
Creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree.

// Normal Approach:
for (let i = 0; i < 1000; i++) {
  const paragraph = document.createElement('p');
  document.body.appendChild(paragraph )
}

// Optimized Approach:
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const p = document.createElement('p');
  fragment.appendChild(p)
}
document.body.appendChild(fragment)

9) Prettify stringified JSON output:

const person = {
  firstName: 'Amit',
  lastName: 'Mondal',
  gender: 'Male',
  interests: ['Coding', 'Gaming', 'Solving Rubix Cube']
};

const normalStringify = JSON.stringify(person);
const prettyStringify = JSON.stringify(person, null, 2);
// OR
const prettyStringify = JSON.stringify(person, null, '\t');

console.log(normalStringify);
console.log(prettyStringify);

10) Convert an array to an object:

const fruits = ['banana', 'apple', 'orange', 'watermelon'];
const fruitsObj = { ...fruits };

11) Fill array with data:

const numDummyArr = new Array(10).fill(1);
const strDummyArr = new Array(10).fill("a");

Might add some more in the future.
Thank you for your time⌛.

Simple use of ⚛️React useState Hook

Amit Mondal — Sun, 29 Mar 2020 18:55:45 +0000

Just an ordinary day and was jumping around videos on YouTube and came across a short video tutorial on creating a react app that uses the Advice Slip API. It is a pretty easy and quick example but in this tutorial react's class component was used to make the app.

So I thought let's re-develop it using the latest React Hooks, so used the useState hook of React v16.8 to re-implement the app.

Live Demo

Codesandbox Link

Following is the code:

File: App.js

// Importing useState from react
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  /**
   * We declare a new state variable(advice) by calling the useState Hook,
   * and set it to ''(empty string) initially.
   * React will remember its current value between re-renders,
   * and provide the most recent one to our function.
   * If we want to update the current advice, we can call setAdvice.
   */

  const [advice, setAdvice] = useState("");

  const fetchAdvice = () => {
    const adviceAPI = "https://api.adviceslip.com/advice";

    // Fetch a random advice slip
    fetch(adviceAPI)
      .then(response => response.json())
      .then(data => {
        // destructuring the advice from data
        const { advice } = data.slip;

        // update to new advice we just fetched
        setAdvice(advice);
      })
      .catch(error => console.error(`Error: ${error}`));
  };

  return (
    <div className="app">
      <div className="card">
        <h2 className="heading">{advice}</h2>
        {/* Trigger fetchAdvice on button click */}
        <button className="button" onClick={fetchAdvice}>
          <span>GIVE ME ADVICE!</span>
        </button>
      </div>
    </div>
  );
}

File: styles.css If you want to decorate it a bit.

body {
  background-color: #666;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: #999;
  max-width: 500px;
  padding: 12px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 60%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

Credits

This is a re-implementation of Adrian Hajdin's work 👏:

📝 Source Code: GitHub
🎥 Video Tutorial: YouTube

Personal Developer Blogs to follow

Amit Mondal — Sun, 23 Feb 2020 12:39:45 +0000

When I started my career as a developer I always struggled to find the latest trends, news, and best practices in the web development world or at least some developers who can help with that. Here is the listing of all the personal blogs that I find really useful and helpful.
The listing does not indicate any priority order.

Flavio Copes

C React.js Vue.js DevTools Javascript HTML CSS Database Express Git Go GraphQL Next.js Node.js Services Svelte Web Platform

Flavio Not only writes a blog post every single day, but he has endless handbooks, courses, and tutorials. Some of the posts are more like snippets but are really helpful.

Alligator IO

Javascript HTML CSS React.js Vue.js Angular WebPlatform Stencil GraphQL Gatsby Electron SASS WebComponent RxJS Typescript Redux

Not a Personal Blog but more like a collaboration, I liked it so mentioning this. Alligator.io is born out of a love for the web platform and Open Source software. Their goal is to try and make it easy and quick to understand things that are otherwise daunting to untrained eyes.

Wes Bos

Javascript HTML CSS React.js Redux Node.js CSS-Grid Markdown

Well known for his Javascript 30 a 30 Day Vanilla JS Coding Challenge that helps you in building 30 things in 30 days with 30 tutorials.

Samantha Ming

Javascript HTML CSS

I really appreciate and love the Tidbits section of her blog it has short and simple code snippets that explain various concepts. Also, the articles and tutorials are amazing.

Addy Osmani

Chrome DevTools LightHouse ImageOptimization Performance

Want some tips on optimizing your webpage/website and make it fast?
Want to know some handy tools in chrome dev tools?
Want some productivity tips?
Just follow him.

Tania Rascia

HTML CSS Javascript React.js Vue.js Node.js Bash Script SQL

Tania Rascia is a full-stack developer. She blogs mostly on modern Javascript, HTML, CSS, and everything web development-related.

Dan Abramov

Javascript React.js Redux CreateReactApp

Dan is known for his amazing contributions to JavaScript - Create React App and Redux - and his blog is known for long, insightful posts that cover unique areas of JavaScript and development in general.

Kent C. Dodds

Javascript React.js TypeScript Testing

Kent C. Dodds is a world-renowned speaker, teacher, and trainer and he’s actively involved in the open-source community as a maintainer and contributor of hundreds of popular npm packages. Kent is the creator of TestingJavaScript.com, Epic React and he’s an instructor on egghead.io and Frontend Masters. He’s also a Google Developer Expert.

Dr. Axel Rauschmayer

Javascript fundamentals

Dr. Axel Rauschmayer, author of many books on javascript like Exploring ES6, Javascript for impatient programmers, Exploring ES2018, and ES2019, regularly writes about the newest developments in Javascript's language specification and gives valuable advice for developers from all walks of life. A must-read blog if you ask me!

Tanay Pratap

Javascript HTML CSS React.js Web Development GraphQL Gatsby Typescript Redux Podcast Mentoring
Tanay Pratap is a software engineer at Microsoft. A great mentor and a teacher who teaches for free. Makes candidates job-ready through his Job Challenge and guidance. He also has a podcast and youtube channel.

Ahmad Awais

VS-code Git JAM-stack Node.js Wordpress

Ahmad Awais is an award-winning open-source engineer and a Google Developers Expert. Author of various open-source dev-tools and software libraries used by millions of developers worldwide. He’s known for his open-source community contributions in the Node.js Community Committee.

Robin Wieruch

Javascript React.js Redux Firebase GraphQL

Robin Wieruch is a german software engineer and freelancer located in Berlin. In recent years he has gained experience in single-page applications.

Swyx

Svelte React.js Typescript Netlify

Swyx has a lot of great posts and tutorials, and one of his most famous contributions to the web development zeitgeist is Learn in Public.

Khalil Stemmler

Node.js Typescript GraphQL Gatsby FunctionalProgramming Networking API

Khalil's blog posts are filling a very rare niche in web development, which is how to build large-scale applications properly, specifically with React, TypeScript, GrarphQL, and Node. He's bridging the gap between intermediate and advanced, which is a difficult area to cover.

Dave Cedia

React.js Redux Svelte

He writes mostly on react, redux, svelte, and everything frontend. He runs a couple of courses on React which are Pure React and Pure Redux.

Valentino Gagliardi

Javascript Python Django API HTML Typescript

His articles are very in-depth and informative, and he cares about responding to users and helping them out as well.

David Walsh

AJAX Canvas SVG CSS Dojo HTML5 JavaScript jQuery Media Mobile MooTools Node.js Performance PHP SEO Shell WordPress

David's expertise and interest lie in front-end technologies, including HTML/5, CSS, JavaScript (as well as frameworks like jQuery, MooTools, and Dojo Toolkit). His server-side skills revolve around PHP and Python.

James King

WebDevelopment React Javascript API

Learn JavaScript and React the right way with fun, easy-to-follow tutorials. James writes about React every week.

I might have forgotten a ton, but I wanted to get a list out of the ones that came to my head. You can mention your favorite one in the comments.

VS Code extensions for Python

Amit Mondal — Sun, 09 Feb 2020 13:33:12 +0000

Won't waste your time and will just jump to the list of Visual Studio Code Extensions that I would recommend if you are a 🐍 Python developer.

1. Python

This will be the first and most important extension that I would recommend. It is all in one power packed extension for Python. It includes rich features like IntelliSense, Linting, Code formatting, Debugging, Testing, Jupyter Notebooks, Environments, and Refactoring.

2. autoDocstring

We all know how important it is to comment and document your code. This extension will:

Quickly generates a docstring snippet that can be tabbed through.
Choose between several different types of docstring formats.
Infers parameter types through pep484 type hints, default values, and var names.
Support for args, kwargs, decorators, errors, and parameter types.

3. Python Test Explorer

Yes, I know the Python extension already does this so why install another one? Well, this includes features like:

Showing a Test Explorer in the Test view in VS Code's sidebar with all detected tests and suites and their state.
Showing a failed test's log when the test is selected in the explorer.
Supporting multi-root workspaces.
Supporting Unittest and Pytest test frameworks.

4. AREPL

This extension is a real-time Python scratchpad. It may not sound like a great deal at first but believe me, if you’re doing any sort of exploratory work then this thing can come handy.

I know there are many more extensions available in the Market Place. Please let me know your favorite Python extensions for VS Code in the comments.

Thanks for giving your precious time and reading this.