Forem: Siddhant Kumar

Malai - Share your dev server (and more) over P2P

Siddhant Kumar — Mon, 05 May 2025 12:05:57 +0000

malai is a new open-source tool from the team at FifthTry. It helps you share your local HTTP server with the world — instantly and securely.

Built on top of the powerful iroh P2P stack, malai lets you expose your local development environment without deploying it to a public server or configuring firewalls and DNS.

Whether you're testing webhooks, giving someone a quick demo, or just want to show off your side project, malai makes it dead simple.

Install malai today using:

curl -fsSL https://malai.sh/install.sh | sh

And run:

$ malai http 3000 --public
Malai: Sharing http://127.0.0.1:3000 at
https://pubqaksutn9im0ncln2bki3i8diekh3sr4vp94o2cg1agjrb8dhg.kulfi.site
To avoid the public proxy, run your own with: malai http-bridge

Or use: malai browse kulfi://pubqaksutn9im0ncln2bki3i8diekh3sr4vp94o2cg1agjrb8dhg

This will share your local HTTP server running on http://localhost:3000 with the world via a secure, shareable URL.

You can also use malai browse subcommand to access this from another computer:

malai browse kulfi://<id52-from-the-above-output>

See the Getting Started guide or run malai --help to explore all the options.

Use Cases

Here are just a few things you can do with malai:

User Acceptance Testing

Share your in-progress app with non-technical stakeholders without pushing to staging.

HTTPS Testing

Test HTTPS-only features like Service Workers and OAuth callbacks with a trusted remote URL.

Webhook Testing

Test Stripe, GitHub, or any other webhook provider locally, without deploying your backend.

Developer Preview

Send a URL to your teammate to get feedback on your frontend work before merging.

All this without any config, DNS setup, or cloud deploys.

Bring your own HTTP bridge

Malai is designed with decentralization in mind. By default, Malai uses a free public HTTP bridge hosted at kulfi.site. This means you can start sharing your local server with the world right away — no setup required.

But if you'd prefer more control, privacy, or reliability, you can run your own bridge. Malai makes it easy to self-host your own HTTP bridge, and you can configure the CLI to use your custom bridge instead of the default one.

See the Getting Started guide for step-by-step instructions on setting up your own bridge and pointing Malai to it.

What’s Next?

We're actively working on expanding what you can do with malai. Here’s a peek at what’s coming:

Share any TCP server, not just HTTP

Soon you'll be able to share any TCP-based service running locally — including your Postgres database, Redis, or even a custom TCP protocol — using the same seamless workflow.
Native support for SSH using malai ssh

We're adding support for secure shell access over P2P with malai ssh. This will let you remotely access your development machine or share a shell session without needing public IPs or VPNs.
Experimental support for sharing local devices like printers and storage over peer-to-peer

We're exploring ways to let you securely share physical hardware — like printers or external drives — directly from your machine over P2P, with fine-grained access controls.

In parallel, we're building a companion GUI app called Kulfi. Kulfi will make it easy to browse and connect to shared services — no bridge required. It'll also include built-in access control (ACL) management, so you can choose exactly who gets access to what. Whether you’re sharing with teammates, friends, or devices across your network, Kulfi will give you visibility and control.

You can learn more about our plans for kulfi and malai on our GitHub Discussions page.

Stay tuned — and if you have ideas, feature requests, or want to contribute, feel free to open an issue or pull request on GitHub! You can also join our discord and chat about the project.

Star us on GitHub ⭐

We're just getting started, and your support means a lot.

If you like what we're building, consider starring the repo on GitHub. It helps others discover the project and keeps us motivated to build more!

Rasoi - An eCommerce store

Siddhant Kumar — Mon, 03 Jan 2022 15:03:41 +0000

A small online store built using nextjs, mongodb, and stripe. The home page is a generated product listing that is rebuilt every time there is a change in products collection.

link to demo

Submission Category:

E-commerce creation

Link to Code

siddhantk232 / rasoi

Rasoi

A small headless online store built using nextjs, mongodb, and stripe. The home page is a generated product listing that is rebuilt every time there is a change in products collection.

Uses

mongo data api to interact with the mongodb database.
mongo realm triggers to trigger nextjs redeploy hook.
stripe checkout for payments.

DB

products collection
```
{
  _id,
  name,
  description,
  images,
  price,
}
```
- creating a products triggers nextjs build SSG
- view products
- order them
- (optional) cart feature
- (optional) cart checkout
orders collection
```
{
  _id,
  sessionId,
  email,
  amount,
  items
}
```
- creating an order triggers an email notification
- stripe checkout on client

View on GitHub

Additional Resources / Info

Uses mongo data api to interact with the mongodb database.
Uses mongo realm triggers to trigger nextjs redeploy hook.
Uses stripe checkout for payments.

Postgres Full Text Search

Siddhant Kumar — Thu, 22 Apr 2021 00:00:00 +0000

Today, I want to talk about how easy it is to implement a full-text search in Postgres. Let's dive right into it!

But first, why you would want to implement text search when you can do queries with LIKE or ILIKE. There are many reasons to this:

Full-text search queries against a specialized stemmed version of your
data. This means that it can search for complex English
words like "justifiable" when searching for "justify".
It is fast, especially combined with indexes. LIKE and
ILIKE will have to do a sequential scan of your data to
select the results.
You can blacklist certain words from getting parsed.

And much more!

Setup

Postgres Instance

I am using docker to create a new Postgres instance on my local machine. To create start a Postgres container, run:

docker run --name=postgresfts -p 5432:5432 -e POSTGRES_PASSWORD=postgres -d postgres

Feel free to use any frontend clients you like to connect to this Postgres instance. For this job, psql will do fine.

Sample Data

We need some data to search. For this I am using the example of a books table that looks like this:

                               Table "public.books"
   Column    |  Type   | Collation | Nullable |              Default
-------------+---------+-----------+----------+-----------------------------------
 id          | bigint  |           | not null | nextval('books_id_seq'::regclass)
 title       | text    |           |          |
 description | text    |           |          |
 price       | numeric |           |          |
Indexes:
    "books_pkey" PRIMARY KEY, btree (id)

To create this books table, run:

CREATE TABLE books (id BIGSERIAL PRIMARY KEY, title text, description text, price numeric);

Now that we have our table, let's fill in some data to work with. Inserting few rows are fine. But we are doing a full-text search and it is good to have few thousand rows to spice things up 😉.

For this, I have put together this simple nodejs script:

const { Pool } = require("pg");
const format = require("pg-format");
const faker = require("faker");

const db = new Pool({
  host: "172.17.0.1", // postgres host
  database: "postgres",
  password: "passwd",
  user: "postgres",
});

async function main() {
  let books = [];

  for (let i = 1; i <= 100000; i++) {
    books[i - 1] = [
      faker.commerce.productName(),
      faker.commerce.productDescription(),
      faker.commerce.price(),
    ];
  }

  const query = format(
    "INSERT INTO books (title, description, price) VALUES %L",
    books
  );

  try {
    await db.query(query);
    console.log("Done!");
  } catch (error) {
    console.error(error);
  }
}

main();

The above script will create 100k rows using faker.js and insert them in the books table.

You can also clone this git repo from siddhantk232/node_postgres_scripts.

Let's Search!

Now that we have our data ready in the books table. Let's implement full-text search.

In Postgres, you need two things to start with, one is a tsvector to search and the other is the search query aka the tsquery.

tsvector?

The tsvector can be another column in your table that stores normalized keywords from the actual data.

In this case, I want the book's title and description column to be searchable. So I would create a tsvector of these columns.

Doing that is pretty easy, we can create a generated column of type tsvector.

To do this, run:

ALTER TABLE books ADD COLUMN fts tsvector 
  GENERATED ALWAYS AS (to_tsvector('english', title || ' ' || description)) 
  STORED;

This will add a column called fts to the books table. While inserting you have to ignore this column as this is a generated column.

The first argument to the to_tsvector is the language we are using. The default gets picked up from the instance's locale settings. You can change this to work with other languages.

Now that we have our data and the tsvector, let's do some search!

For searching, we use the @@ operator in Postgres. @@ returns true if the search succeeds and false otherwise.

Example:

SELECT title FROM books WHERE fts @@ plainto_tsquery('chip') LIMIT 2;

I was getting a few thousand results which were hard to show, so I put a limit of two here.

The output looks like this:

           title
---------------------------
 Refined Metal Chips
 Intelligent Granite Chips
(2 rows)

As you can see our search works. We searched for the chip and it returned the first two results it found.

But how fast?

Let's analyze the search, but this time with a new query so that we don't hit the cache and get raw results.

EXPLAIN ANALYZE SELECT id, title, description, price FROM books WHERE fts @@ plainto_tsquery('style');

This will output:

                                                          QUERY PLAN
---------------------------------------------------------------------------------------------------------------------------
 Gather  (cost=1000.00..17860.20 rows=8297 width=150) (actual time=0.578..95.603 rows=8329 loops=1)
   Workers Planned: 2
   Workers Launched: 2
   ->  Parallel Seq Scan on books  (cost=0.00..16030.50 rows=3457 width=150) (actual time=0.461..86.162 rows=2776 loops=3)
         Filter: (fts @@ plainto_tsquery('style'::text))
         Rows Removed by Filter: 30557
 Planning Time: 0.191 ms
 Execution Time: 96.159 ms
(8 rows)

You can see we are getting about 8000 results in about 100ms! This is fast but we can do better.

Index to the rescue!

Postgres recommends using a GIN index. Actually, You can use either GIN or the GiST index type. You can learn the differences between them here.

Let's create a GIN index on our fts column:

CREATE INDEX books_search_idx ON books USING GIN (fts);

You can run \d books to see the created index in the psql client. The output will look something like this:

                                                                Table "public.books"
   Column    |   Type   | Collation | Nullable |                                               Default
-------------+----------+-----------+----------+-----------------------------------------------------------------------------------------------------
 id          | bigint   |           | not null | nextval('books_id_seq'::regclass)
 title       | text     |           |          |
 description | text     |           |          |
 price       | numeric  |           |          |
 fts         | tsvector |           |          | generated always as (to_tsvector('english'::regconfig, (title || ' '::text) || description)) stored
Indexes:
    "books_pkey" PRIMARY KEY, btree (id)
    "books_search_idx" gin (fts)

Let's try our search once again to see how much faster it is:

                                                           QUERY PLAN
--------------------------------------------------------------------------------------------------------------------------------
 Bitmap Heap Scan on books  (cost=84.55..7554.73 rows=8297 width=150) (actual time=4.786..17.013 rows=8329 loops=1)
   Recheck Cond: (fts @@ plainto_tsquery('style'::text))
   Heap Blocks: exact=4127
   ->  Bitmap Index Scan on books_search_idx  (cost=0.00..82.47 rows=8297 width=0) (actual time=3.125..3.126 rows=8329 loops=1)
         Index Cond: (fts @@ plainto_tsquery('style'::text))
 Planning Time: 0.425 ms
 Execution Time: 18.217 ms
(7 rows)

8k results in ~20ms in a 100k row table. This is crazy fast!

The End

There is a lot that you can do with text search in Postgres. It is impossible to cover all of them in a single blog 😉

Postgres Triggers

Siddhant Kumar — Fri, 09 Apr 2021 14:37:43 +0000

Today in this blog, I want to talk about Postgres triggers. I will also go through an example use case to learn how to use it.

The Scenario

I have an e-commerce app to sell books and I am implementing the cart functionality in the database. So, there is a carts table that stores unique cart entries per user and a books table. For cart items, we have another table, carts_books. The carts and carts_books are using a many-to-many relation. So, A cart can have many books, and a book can be used in many carts.

Whenever a row is inserted or updated in the carts_books table, I want to calculate the total price of the cart used. I also want to take the multiplier column of the carts_books table into account. This multiplier column is the quantity of a single book. That means I am allowing a customer to buy many copies of a book.

Let's use Postgres triggers to solve this problem. Before that, below is the list of columns of every table discussed so far.

The schema

                               Table "public.carts"
   Column    |           Type           | Collation | Nullable |      Default
-------------+--------------------------+-----------+----------+--------------------
 created_at  | timestamp with time zone |           | not null | now()
 updated_at  | timestamp with time zone |           | not null | now()
 archived_at | timestamp with time zone |           |          |
 amount      | numeric                  |           | not null |
 status      | text                     |           | not null | 'ENQUEUED'::text
 user_id     | text                     |           | not null |
 id          | uuid                     |           | not null | gen_random_uuid()


                                     Table "public.books"
   Column    |           Type           | Collation | Nullable |              Default
-------------+--------------------------+-----------+----------+-----------------------------------
 created_at  | timestamp with time zone |           | not null | now()
 updated_at  | timestamp with time zone |           | not null | now()
 archived_at | timestamp with time zone |           |          |
 name        | text                     |           | not null |
 price       | numeric                  |           | not null |
 user_id     | bigint                   |           | not null |
 id          | bigint                   |           | not null | nextval('books_id_seq'::regclass)
 description | text                     |           | not null |

              Table "public.carts_books"
   Column   |  Type   | Collation | Nullable | Default
------------+---------+-----------+----------+---------
 book_id    | bigint  |           | not null |
 multiplier | integer |           | not null |
 user_id    | text    |           | not null |
 cart_id    | uuid    |           | not null |

The Solution

We want to run a procedure (also known as a function) after a row in the tablecarts_books is INSERTED or UPDATED.

For this let's create two Postgres triggers, one for UPDATE and the other for INSERT.

CREATE TRIGGER update_cart_price
  AFTER UPDATE ON public.carts_books
  FOR EACH ROW
  EXECUTE PROCEDURE public.update_cart_price ();

COMMENT ON TRIGGER update_cart_price ON public.carts_books IS 
'update the price of the related cart based on the updated cart item(s) in relation carts_books';

CREATE TRIGGER calculate_cart_price
  AFTER INSERT ON public.carts_books
  FOR EACH ROW
  EXECUTE PROCEDURE public.update_cart_price ();

COMMENT ON TRIGGER calculate_cart_price ON public.carts_books IS 
'update the price of the related cart based on the updated cart item(s) in relation carts_books';

Above is the code that creates two Postgres triggers. Let's understand the syntax and what each clause used above means.

To create a Postgres trigger, we want to tell Postgres about the following things:

Name of the trigger. In this case, I have used names, update_cart_price and
calculate_cart_price.
When you want the code to run? I want to know the values that are inserted,
for this, I have to use the AFTER INSERT and the AFTER UPDATE clause.
How do you want to run this trigger? There are two options, one is to run this trigger for each affected row. Another option is to run the trigger `per statement.
What do you want to run? I have these triggers to run the procedure called update_cart_price().

You must create the function before using it in a function.
A function must return TRIGGER in order to be used in a trigger.

The function that I want to run on these triggers is defined as:

`sql

CREATE OR REPLACE FUNCTION public.update_cart_price ()
RETURNS TRIGGER
AS $$
DECLARE
item record;
new_amount numeric := 0;
BEGIN
FOR item IN
SELECT
price,
multiplier
FROM
carts_books
JOIN books ON book_id = books.id
WHERE
cart_id = NEW.cart_id LOOP
new_amount := new_amount + (item.price * item.multiplier);
END LOOP;
UPDATE
carts
SET
amount = new_amount
WHERE
id = NEW.cart_id;
RETURN new;
END;
$$
LANGUAGE plpgsql;

This function selects the price and multiplier of all the books used inside the cart. It then updates the cart's amount column to reflect the updated amount.

The data of the changed row is made available through the new record.

Also, the function cannot use plain SQL language, you must use a procedural
language.

The Conclusion

Postgres triggers make it easy to execute small business logic on data changes.

Also, we do not need to care about the network latency that we would face if we execute the same logic in a different service (a nodejs app for example).

Good Reads

In addition to this post, I also recommend reading these to know more about Postgres
triggers.

The Ultimate Hasura Development Setup

Siddhant Kumar — Sun, 28 Feb 2021 14:36:28 +0000

This post was originally published on my website.

In this post, we will look at how I set up and use Hasura graphql engine for local
development with pgadmin4 and pldbgapi (pldebugger).

TLDR;

This setup uses Hasura cli to generate postgres migrations and hasura metadata.
For debugging and other administrative operations, this setup uses pgAdmin4 with pldbgapi.
You can check this sample project to get a better idea.

Hasura Cli setup

To create a fresh hasura project, run hasura init. This will create a folder with the name you provide. Inside this folder, it creates many subfolders for managing different components of your hasura server.

The project structure looks like this:

.
├── config.yaml                # main config file
├── metadata                   # hasura metadata
│   ├── actions.graphql
│   ├── actions.yaml
│   ├── allow_list.yaml
│   ├── cron_triggers.yaml
│   ├── functions.yaml
│   ├── query_collections.yaml
│   ├── remote_schemas.yaml
│   ├── tables.yaml
│   └── version.yaml
├── migrations                 # postgres migrations
└── seeds

3 directories, 10 files

The default config assumes you are running the graphql-engine at port 8080. You can change this setting in config.yml.

Hasura local server with docker-compose

To easily spin up many containers for postgres, hasura and pgadmin, I am using docker-compose.

The docker-compose.yml file looks like this:

version: '3.6'
services:
  db:
    build:
      context: .
      dockerfile: Dockerfile.postgres
    image: postgres:13
    restart: always
    volumes:
      - db_volume:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: siddhant   # default postgres superuse
      POSTGRES_PASSWORD: passwd # password for siddhant
      POSTGRES_DB: hasura_db
  hasura:
    image: hasura/graphql-engine:latest
    ports:
      - "8080:8080" # default port expected by hasura cli
    depends_on:
      - "db"
    restart: always
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://siddhant:passwd@db:5432/hasura_db
      ## enable the console served by server
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      ## enable debugging mode. It is recommended to disable this in production
      HASURA_GRAPHQL_DEV_MODE: "true"
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      ## uncomment next line to set an admin secret
      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
  pgadmin:
    image: dpage/pgadmin4
    restart: always
    environment:
      PGADMIN_DEFAULT_EMAIL: test@test.com
      PGADMIN_DEFAULT_PASSWORD: passwd
    ports:
      - "9090:80"
    volumes:
      - pgadmin_volume:/var/lib/pgadmin
volumes:
  db_volume:
  pgadmin_volume:

Some important things in this docker-compose file:

Service db uses postgres:13 official docker image with a custom Dockerfile to build this image. This custom Dockerfile.postgres installs pldebugger extension for debugging procedural code. The code for this Dockerfile.postgres looks like this:

    FROM postgres:latest

    ENV PG_MAJOR 13
    ENV PG_FULL 13.1

    # Install the postgresql debugger
    RUN apt-get update \
    && apt-get install -y --no-install-recommends \
    postgresql-$PG_MAJOR-pldebugger


    EXPOSE 5432

To enable this extension you need to run CREATE EXTENSION pldbgapi; in your postgres instance.

Service hasura uses the hasura-graphql-engine provided by Hasura.
We are also exposing port 8080 so that this server is accessible by our hasura cli's console server.
Serice pgadmin use the dpage/pgadmin4 docker image.
To use pgadmin we are exposing port 80 as 9090 on our system.

That's it :)

Now you can use this setup by running the command docker-compose up -d inside the project folder.
This command will start all three services for us to use.

To access the hasura, console run hasura console command inside the project file.
This command will start a hasura console server that will record all your actions and update the migrations and other folders accordingly.

To access pgadmin, you can go to localhost:9090 on your browser.
You can log in with the email and password you set in the docker-compose file. Also, for debugging your procedural inside pgadmin, read the docs here https://www.pgadmin.org/docs/pgadmin4/latest/debugger.html

Run CREATE EXTENSION pldbgapi; inside your postgres instance to enable the pldebugger extension.

Follow me on twitter: @siddhantk232

Announcing my portfolio/blog website.

Siddhant Kumar — Wed, 19 Aug 2020 12:12:39 +0000

Hello everyone!

I have recently built this blog/portfolio website using 11ty(eleventy) .

You can check it out here on siddhant.codes.

You can see the source code here

I have not added any social media links right now but I will add them soon. For now, you can follow me here on twitter :)

Assets used.

I got the illustration on the homepage from pixeltrue.
Fonts used are Luckiest Guy and Montserrat. Available from google fonts
For blogs, I have planned to use images from pexels or Unsplash.
For code blocks, I used prism.js with the monokai theme. I am planning to create a custom gruvbox prism css as I did not find it on the internet.

Other than this I have also used some useful eleventy plugins for code blocks and image optimization which you can check out in the source code mentioned above.

Things I am planning to add.

comments section. For this, I am thinking of using Github issues. So the plan is whatever you comment for a certain blog will be stored as a GitHub issue on my repo. I got this idea from here
monthly newsletter. I may use SendGrid for this as it is quite easy to use.

Deployment

This project is hosted on netlify with a custom domain from name.com. Also, the SSL certificate is auto issued from netlify which is quite nice.

I would love to know what you guys think. Please share how I can improve this :)

Bye devs!

Using javascript custom events to make a notification service.

Siddhant Kumar — Wed, 01 Jul 2020 10:42:48 +0000

Read this blog on my website here.

Recently, I came across this article by Flavio copes on "Custom events in javascript" and after reading that I got the idea for this post.

So today we will implement a simple notification service built using vanilla js :)

I am going to integrate this notification service in a todo app that I have created. You can find the finished code here

let's take a look at how our code looks like.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <form>
        <div>
          <input placeholder="todo" type="text" name="todos" id="todo" />
        </div>
        <button type="submit">add todo</button>
      </form>

      <ul id="todos"></ul>

      <div id="notify"></div>
    </main>

    <script src="main.js"></script>
  </body>
</html>

Here I have a simple form with an input:text and button:submit. And I also have a ul#todos for injecting in the todos. Other than that we also have a div#notify, we will use this to position our notification container on the top-right of the screen.

style.css

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(20, 20, 20);
  width: 100%;
  height: 100vh;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
}

button {
  color: #ffffff;
  background-color: rgb(73, 129, 233);
  border: 0;
  cursor: pointer;
  margin-left: 10px;
}

input,
button {
  padding: 10px 20px;
}

ul {
  display: none;
  list-style: none;
  width: 50%;
  margin: 30px auto;
  border-radius: 4px;
  background-color: rgb(157, 185, 236);
  padding: 20px;
}

li {
  margin: 15px 0;
  border-bottom: 1px solid rgb(65, 83, 116);
}

.add-display {
  display: block;
}

.notification-container {
  padding: 10px 15px;
  background-color: rgb(130, 151, 190);
}

#notify {
  width: 20%;
  position: fixed;
  top: 20px;
  right: 30px;
  border-radius: 4px;
}

Pretty basic, right?

Apart from the basic form and body styles, I have added position: fixed; on the #notify div. This will prevent the notification container from moving onScroll.
Also, I have the .notification-container which we are using in the javascript.

main.js

const form = document.forms[0];
const notificationHolder = document.querySelector("#notify");

const notify = new Event("notify");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const todo = form.getElementsByTagName("input")[0];

  window.todos.innerHTML += `

    <li>${todo.value}</li>

  `;

  todo.value = "";

  document.dispatchEvent(notify);

  setTimeout(() => {
    notificationHolder.innerHTML = "";
  }, 2500);

  window.todos.classList.add("add-display");
});

document.addEventListener("notify", (...e) => {
  const container = document.createElement("div");

  container.classList.add("notification-container");
  container.innerHTML = `Todo added !`;

  notificationHolder.insertAdjacentElement("beforeend", container);
});

Here, we are using listening on the submit form event to add todos in our ul#todos.

Just below that, we have one more event listener which is listening for the notify event, that's is a custom event that we have created. Let's focus on the lines which are used to create this custom event.

so on top we have:

const notify = new Event("notify");

We are using the Event constructor to register a new event with the name 'notify' in our code. The name here is important because we will use this name only to listen for this custom event in our code.

Now in the submit listener callback function we are using document.dispatchEvent(notify); to trigger this event. Also, we are setting a timeout function to clear all notification after 2.5 seconds (minimum).

In the end, we are listening to our custom event notify and inserting a new notification container inside our div#notify.

Example

That's it. Our notification service is ready. I know you might have some questions, let's address them below:

Questions

what about modularity?

well, this was just a todo app and the implementation of custom events here is so small. If you have a big app that is using plain HTML, CSS, and js, then you can have a separate file that has custom Event declared and export functions for dispatching that event, and you can listen for that specific event in that file only.

If your project uses libraries like react or vue and state machines like mobX or redux then you may not need to write custom Event yourself.

How to pass custom notification message?

Well, I do not have an answer for how to pass something when dispatching the event and use that passed value in the callback function of a custom event listener. So you know then please share.

If I had to fire multiple notifications like todo added, logged in, and logged out I would create a new Event for each of them.

More questions ask in comments

If you are on twitter, consider following me.