Forem: Alish Giri

Two tutorials to master Riverpod!

Alish Giri — Fri, 03 Oct 2025 08:51:28 +0000

These two YouTube tutorials are all you need to learn how to use Riverpod in Flutter.

Flutter + AI: Build an AI Trainer App (2025 Tutorial)

Alish Giri — Sun, 01 Jun 2025 04:58:22 +0000

Do you want to build your own personal trainer using the power of AI?? Then rest assure I have got you covered!!! 💪🏻

Drop and give me 5 before you start!!! 😄

Flutter High Level Simplified Architecture with Riverpod

Alish Giri — Sat, 24 May 2025 02:52:28 +0000

If you have always wanted to switch to Riverpod, then I have got you covered.

I was using Provider for state management for a very long time in Flutter and honestly I was not happy with it. The setup always gave me a nightmare especially if I wanted to have multiple provider's state in a single screen. Furthermore, utilizing one provider in multiple places also required some additional setup that was getting quite annoying.

Despite these issues, I never dared to use Riverpod in production code. I attempted to understand it a few times and was surprised to find out how complex it felt at first. It was not until very recently and after several months of trials and errors that I finally cracked the code and wanted to share this setup with you guys.

I have also attached the entire demo project on the video description so that you can save it for later on. I did not add the link here because watching at least first three chapters is crucial to understanding how Riverpod works.

I hope it helps!

No one talks about GraphQL anymore!

Alish Giri — Sun, 06 Apr 2025 12:59:04 +0000

Let me jump right in, the perfect analogy for describing GraphQL is equivalent to what Typescript is to Javascript. In the REST API, payload and end-points are not typed whereas in GraphQL request and response are pre-determined using specified types and we all know the benefits of having typed languages. This is the core principle of GraphQL with other added benefits.

So why is no one talking about GraphQL anymore?

As you can see in the Postman report below, since the release of GraphQL in 2015 the popularity has just grown significantly. And every developer currently has interacted with GraphQL in one way or another. Due to this, almost all of the experienced developers nowadays find GraphQL as part of their career making it no longer a HOT topic of discussion.

Furthermore, like the way Typescript has become a mandatory thing for most Javascript projects. It is sensible to claim that having typed request/response API is going to be a permanent thing in the future.

Now the question is, will GraphQL be the leader in this space or a new technology will emerge, with much simpler implementation than GraphQL?

Learn more about GraphQL in this post -> Why choose GraphQL over REST API?

One script, one window, multiple attached commands

Alish Giri — Sat, 29 Mar 2025 08:40:08 +0000

Every time I started working on a project I had open up two to three different Terminal windows to start development work 🙄.

One to start the Docker, other to start the server and finally one more to run the frontend. And viewing logs on all these terminal one after the other was also getting annoying so I did some research and found something incredible 🚀.

You can create one script and chain different commands using & to run multiple attached sessions as shown below.

# package.json file

{
    ...
    scripts: {
        ...
        "run:dev": "docker-compose up & (cd path/to/server && ./run/server) & yarn start"
    }
}

The benefits of using this is just out of this world. You will be using one terminal window to view logs from multiple different projects.

And to kill the previous processes in the chain use the following syntax. Ctrl + C will only close the later one.

 # To list all the running processes. Explore how the name works.
ps aux | grep <app_name>

pkill <app_name> # For MacOS & Linux

taskkill -f -im mac-server # For Windows

Flutter Integration Test: Model Driven Architecture

Alish Giri — Mon, 24 Feb 2025 07:47:36 +0000

tl;dr

Please scroll to the last paragraph to get the link to the free video guides to start writing integration test for your Flutter project.

You know how sometimes we end up making changes to our code, and those changes affect parts of the project we didn’t even think about? Well, I’ve been there too. It happened to me when I launched my first commercial app in 2021.

Features change all the time, and it’s tough to make sure everything works after major or minor code changes. And even with unit and widget tests, they weren’t enough to help. It was getting really frustrating to keep the project and the tests in sync. There were just too many changes during development.

Despite all that trouble, I didn’t have the confidence that the app would work like it was supposed to. But then, after three years of experimenting and learning about the testing ecosystem, I came up with a solution: Model Driven Integration Test.

It’s not just about writing the tests; it’s about structuring them in a way that’s scalable and maintainable. And that’s given me a lot of confidence. I can make changes to the Flutter and backend projects without worrying about breaking anything. This testing style has been a lifesaver.

Sometimes, the tests would fail, and they would point out exactly where a feature was failing after making the changes. That was really helpful.

Isn’t that what we’re trying to achieve when we write tests? With every new release, we should have the confidence that 99% of the time, our code will work. And if a bug does appear, I just extend the tests to cover that issue, and now it’s even more stable than before.

I haven’t found any other way to make sure that every new release won’t be a pain. And I’d love to share this with you.

The first few free videos will give you everything you need to know to write integration test for your project and if you want to learn the Model Driven Architecture then you can choose to enroll in the course.

Checkout the course here!

You don't have to memorize get config commands!

Alish Giri — Tue, 28 Jan 2025 10:38:02 +0000

If you modify git configuration more that an average developer then the simplest way to edit git configuration is by opening up the file and modifying the contents directly.

This is super useful if you have two different GitHub accounts, one personal and the other for work. Where you have to update the config file to adjust the signing key, adding suffix to the origin url, along with other informations. This approach mentioned here can save you valuable time if you have a habit like mine to forget the git commands frequently 😄.

You can use the following command to locate your global git config file.

git config --list --show-origin

However, most of the time we want primary account to be the global config and for secondary account we want to have a project based configuration file.

For your current project .git/config is where the config file is stored and this file is a copy of global git config file.

Now, use one of the following command to open up a file and then modify the contents directly.

vim .git/config

nano .git/config

open .git/config -a <your_IDE>

This way you do not have to memorize all sorts of git commands.

SAMPLE CONFIG FILE

[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
    precomposeunicode = true
[remote "origin"]
    url = <your_origin>
    fetch = +refs/heads/*:refs/remotes/origin/*
[user]
    name = <username>
    email = <your_email>
    signingkey = XXXXXXXXXXXXXXXX
[commit]
    gpgsign=true
[branch "prod"]
    remote = origin
    merge = refs/heads/prod
    vscode-merge-base = origin/prod
[branch "dev"]
    vscode-merge-base = origin/main
    remote = origin
    merge = refs/heads/dev
[lfs]
    repositoryformatversion = 0

Printing HTML best technique with sample receipt.

Alish Giri — Fri, 10 Jan 2025 13:30:28 +0000

I have been experementing with printing invoices using Javascript and Tailwindcss. After several trials and errors the following is the best configuration I found to get the optimal results.

(optional) Configure Tailwindcss

If you are using tailwindcss to style your invoice then you can set the following configuration to access to 'print' and 'screen' prefixes that you can use to hide/show content based on your requirements.

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            screens: {
                print: { raw: 'print' },
                screen: { raw: 'screen' }
            },
            // ...
        }
    },
    plugins: []
};

Now you can utilize this as follows:

<div class="screen:bg-red-300 print:bg-white" />

Add this to your primary CSS file

/* This will hide the extra header and footer contents added by the browser. */
@media print {
    @page {
        margin: 0.3in 0.7in 0.3in 0.7in !important;
    }
}

/* Change this as you like */
@media screen {
    html,
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow: auto;
        background-color: #982b44;
    }
}

Always use a separate route, do not use a pop up window.

Also, set the document title for better experience.

<head>
    ...
    <title>your-file-name</title>
    ...
</head>

document.title = "your-file-name"

Use join('') to hide the unnecessary commas, if you are looping through the items like below.

const tableRows = orders.map((item, index) => {
    // ...
    return `
    <tr class="border-b border-gray-200 break-inside-avoid break-before-auto">
        <td class="max-w-0 py-2 pl-4 pr-3 text-sm sm:pl-0">
            <div class="font-medium text-gray-900"><span class="mr-4 text-gray-500">${index + 1}.</span>${item.name}</div>
        </td>
        <td class="hidden px-3 py-2 text-right text-sm text-gray-500 sm:table-cell">${quantity}${weightUnit}</td>
        <td class="hidden px-3 py-2 text-right text-sm text-gray-500 sm:table-cell">${price}</td>
        <td class="py-2 pl-3 pr-4 text-right text-sm text-gray-500 sm:pr-0"><span class="text-xs">${item.currency}</span> ${total}</td>
    </tr>
    `;
});

and display this as,

<tbody>
    ${tableRows.join('')}
</tbody>

Sample Receipt


export function receiptGenerator(seller: any, order: any): string {
    const panNum = 'XXXXXXXX';
    const companyLogo = // your-company-logo
    const deliveryAddr = order.deliveryAddress;

    let vat = 0.0;
    let subTotal = 0;
    let currency = '';
    const tableRows = order.items.map((item, index) => {
        // ...
        return `
            <tr class="border-b border-gray-200 break-inside-avoid break-before-auto">
                <td class="max-w-0 py-2 pl-4 pr-3 text-sm sm:pl-0">
                    <div class="font-medium text-gray-900"><span class="mr-4 text-gray-500">${index + 1}.</span>${item.name}</div>
                </td>
                <td class="hidden px-3 py-2 text-right text-sm text-gray-500 sm:table-cell">${quantity}${weightUnit}</td>
                <td class="hidden px-3 py-2 text-right text-sm text-gray-500 sm:table-cell">${price}</td>
                <td class="py-2 pl-3 pr-4 text-right text-sm text-gray-500 sm:pr-0"><span class="text-xs">${item.currency}</span> ${total}</td>
            </tr>
        `;
    });
    return `
        <div class="mx-auto my-6 max-w-max rounded bg-white p-6 shadow-sm text-black">
            <div class="grid grid-cols-2 items-center">
                <div>
                <img width="100" height="100" alt="company-logo" src="${companyLogo}" />
                </div>

                <div class="text-right">
                <p>${seller.name}</p>
                <p class="text-sm text-gray-500">${seller.email}</p>
                <p class="mt-1 text-sm text-gray-500">${seller.phoneNumber}</p>
                <p class="mt-1 text-sm text-gray-500">VAT: ${panNum}</p>
                </div>
            </div>

            <!-- Client info -->
            <div class="mt-8 grid grid-cols-2 items-center">
                <div>
                <p class="font-bold text-gray-800">Bill to :</p>
                <p class="text-gray-500">
                    ${deliveryAddr.addressLine1}
                    <br />
                    ${deliveryAddr.state}, ${deliveryAddr.city} ${deliveryAddr.postcode}, ${deliveryAddr.country}
                </p>
                <p class="text-gray-500">info@email.com</p>
                </div>

                <div class="text-right">
                <p class="">
                    Invoice number:
                    <span class="text-gray-500">${displayInvoiceNumber(order.orderNumber)}</span>
                </p>
                <p class="text-sm">
                    Invoice Date: <span class="text-gray-500">${dateTime.objectIdToDate(order.id)}</span>
                    <br />
                    Due Date: <span class="text-gray-500">${dateTime.objectIdToDate(order.id)}</span>
                </p>
                </div>
            </div>

            <!-- Invoice Items -->
            <div class="-mx-4 mt-8 flow-root sm:mx-0">
                <table class="min-w-full break-inside-auto">
                    <colgroup class="break-inside-auto">
                        <col class="w-full sm:w-1/2" />
                        <col class="sm:w-auto" />
                        <col class="sm:w-auto" />
                        <col class="sm:w-1/5" />
                    </colgroup>
                    <thead class="border-b border-gray-300 text-gray-900 table-header-group">
                        <tr>
                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Items</th>
                            <th scope="col" class="hidden px-3 py-3.5 text-right text-sm font-semibold text-gray-900 sm:table-cell">Quantity</th>
                            <th scope="col" class="hidden px-3 py-3.5 text-right text-sm font-semibold text-gray-900 sm:table-cell">Price</th>
                            <th scope="col" class="py-3.5 pl-3 pr-4 text-right text-sm font-semibold text-gray-900 sm:pr-0">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${tableRows.join('')}
                    </tbody>
                </table>
                <table class="min-w-full">
                    <colgroup>
                        <col class="w-full sm:w-1/2" />
                        <col class="sm:w-auto" />
                        <col class="sm:w-auto" />
                        <col class="sm:w-1/5" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th scope="row" colspan="3" class="hidden pl-4 pr-3 pt-6 text-right text-sm font-normal text-gray-500 sm:table-cell sm:pl-0">Subtotal</th>
                            <th scope="row" class="pl-6 pr-3 pt-2 text-left text-sm font-normal text-gray-500 sm:hidden">Subtotal</th>
                            <td class="pl-3 pr-6 pt-2 text-right text-sm text-gray-500 sm:pr-0"><span class="text-xs">${currency}</span> ${Math.round(subTotal) / 100}</td>
                        </tr>
                        <tr>
                            <th scope="row" colspan="3" class="hidden pl-4 pr-3 pt-2 text-right text-sm font-normal text-gray-500 sm:table-cell sm:pl-0">Tax</th>
                            <th scope="row" class="pl-6 pr-3 pt-2 text-left text-sm font-normal text-gray-500 sm:hidden">Tax</th>
                            <td class="pl-3 pr-6 pt-2 text-right text-sm text-gray-500 sm:pr-0"><span class="text-xs">${currency}</span> ${Math.round(subTotal * vat * 100) / 100}</td>
                        </tr>
                        <tr>
                            <th scope="row" colspan="3" class="hidden pl-4 pr-3 pt-2 text-right text-sm font-normal text-gray-500 sm:table-cell sm:pl-0">Discount</th>
                            <th scope="row" class="pl-6 pr-3 pt-2 text-left text-sm font-normal text-gray-500 sm:hidden">Discount</th>
                            <td class="pl-3 pr-6 pt-2 text-right text-sm text-gray-500 sm:pr-0">-</td>
                        </tr>
                        <tr>
                            <th scope="row" colspan="3" class="hidden pl-4 pr-3 pt-2 text-right text-sm font-semibold text-gray-900 sm:table-cell sm:pl-0">Total</th>
                            <th scope="row" class="pl-6 pr-3 pt-2 text-left text-sm font-semibold text-gray-900 sm:hidden">Total</th>
                            <td class="pl-3  pt-2 text-right text-sm font-semibold text-gray-900 sm:pr-0"><span class="text-xs">${currency}</span> ${Math.round((subTotal + subTotal * vat) * 100) / 100}</td>
                        </tr>
                    </thead>
                </table>
            </div>

            <!--  Footer  -->
            <div class="mt-16 border-t-2 pt-4 text-center text-xs text-gray-500">Please pay the invoice before the due date. You can pay the invoice by logging in to your account from our client portal.</div>
        </div>
    `;
}

Hope this helps! Took me two days to make this perfect!

Launching my first game soon!

Alish Giri — Thu, 21 Nov 2024 10:10:26 +0000

After 7 years of software development I have decided to build my first game.

Convert Svelte to PWA.

Alish Giri — Tue, 22 Oct 2024 07:51:28 +0000

Step 1

Create a folder called service-worker inside src/ folder.

Step 2

Create a new file called index.ts or index.js inside src/service-worker/ folder with the following contents.

/// <reference types="@sveltejs/kit" />

import { build, files, version } from '$service-worker';

const CACHE = `cache-${version}`;

const ASSETS = [
    ...build, // the app itself
    ...files // everything in `static`
];

self.addEventListener('install', (event) => {
    // Create a new cache and add all files to it
    async function addFilesToCache() {
        const cache = await caches.open(CACHE);
        await cache.addAll(ASSETS);
    }
    event.waitUntil(addFilesToCache());
});

self.addEventListener('activate', (event) => {
    // Remove previous cached data from disk
    async function deleteOldCaches() {
        for (const key of await caches.keys()) {
            if (key !== CACHE) await caches.delete(key);
        }
    }
    event.waitUntil(deleteOldCaches());
});

self.addEventListener('fetch', (event) => {
    // ignore POST  requests, etc
    if (event.request.method !== 'GET') return;

    async function respond() {
        const url = new URL(event.request.url);
        const cache = await caches.open(CACHE);

        // `build`/`files` can always be served from the cache
        if (ASSETS.includes(url.pathname)) {
            return cache.match(url.pathname);
        }

        // for everything else, try the network first, but
        // fall back to the cache if we're offline
        try {
            const response = await fetch(event.request);

            if (response.status === 200) {
                cache.put(event.request, response.clone());
            }

            return response;
        } catch {
            return cache.match(event.request);
        }
    }

    event.respondWith(respond());
});

Step 3

Create manifest.json file inside static/ folder with the following contents.

Logos and screenshots should be placed inside static/ folder. For this tutorial I have used static/pwa-assets/ folder.

{
    "name": "app_name",
    "description": "app_description",
    "display": "standalone",
    "start_url": "/",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "pwa-assets/logo-144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "pwa-assets/logo-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ],
    "screenshots": [
        {
            "src": "pwa-assets/app-screenshot.png",
            "sizes": "1280x720",
            "type": "image/png",
            "form_factor": "wide",
            "label": "screenshot_description_here"
        }
    ]
}

Step 4

Add the following to the head tag on the src/app.html file.

<link rel="manifest" href="/manifest.json" />

Enjoy your Svelte Progressive Web App (PWA)! 🫡

Git Tags: All you need to know!

Alish Giri — Sat, 19 Oct 2024 12:18:19 +0000

Git has the ability to tag specific points in a repository’s history. This is useful to mark releases (like v1.2 or v2.0).

What you will learn?

Types of git tags and how to create them?
List existing git tags.
How to delete a git tag?
How to move the last tag to the latest commit?
How to edit a tag message?
How to get the code from a specific tag?

Types of git tags and how to create them?

There are two types of git tags: lightweight and annotated.

Most of the time you will use Annotated tags. A Lightweight tag is mostly used for private purposes.

Annotated Tags

This stores information such as tagger name, email, and date; have a tagging message; and can be signed and verified with GNU Privacy Guard (GPG).

git tag -a v1.9 -m "your release information..." -s
# -a = annotated
# -m = message
# -s = signed

# Use this to list detailed information that the tag stores.
git show v1.9

Lightweight Tags

Do not use -a, -s, or -m to apply lightweight tag, just provide a tag name.

git tag v1.9

# Use this to list detailed information that the tag stores.
git show v1.9

List existing git tags.

git tag

This command lists tag in alphabetical order.

# Output
v1.0
v1.1
v1.2

You can also search for tags that match a particular pattern.

git tag -l "v1.8*"

# Output
v1.8
v1.8-rc0
v1.8-rc1
v1.8-rc2
v1.8-rc3

How to delete a git tag?

git tag -d v1.8
# -d = delete

How to move the last tag to the latest commit?

git tag -f -a <tag_name>

git push -f --tags

How to edit a tag message?

git tag -m '<edited_message>' --edit <tag_name> -s -f

How to get the code from a specific tag?

You can checkout a tag and create a new branch from it.

git checkout -b <new_branch_name> <tag_name>

InDesign vs Illustrator. Say no to PDF in Illustrator!

Alish Giri — Thu, 19 Sep 2024 06:23:54 +0000

Illustrator and PDF Document

PDF document cannot be effectively built in Adobe Illustrator. Illustrator is built for vector images and graphic design. Vector images and graphics are made of points, lines, shapes, and curves based on mathematical formulas rather than a set amount of pixels, and therefore can be scaled up or down while maintaining image quality. However, when it comes to PDF document where we work mostly with "Text" Illustrator lacks several features.

Not ideal for PDF documents because of the following:

Manual work of styling every single heading, subheading and paragraph style.
Page layout cannot be globally set, every single page has to copy the design and if something changes we have to manually change it everywhere.
Table of contents page have to be manually built and links to different section of the document cannot be included.
Exporting PDF pages cannot be done as a single PDF document. Every page has to be exported individually and then combined. This is crazy amount of work if your PDF document has large number of pages.

InDesign and PDF Document

Adobe InDesign is built for creating books, magazines, and brochures, as well as print and digital publications. InDesign is much more suitable for building PDF documents.

Benefits of InDesign while creating a PDF document:

Common components such as heading, subheading and paragraph style can be configured in one place.
Common page layouts can be defined in one place and applied in multiple pages with click of a button.
Table of contents can be auto-generated based on components that we define.
Links to different parts of the document can be added.
Exporting document will also preserve all pages and their positioning.

Conclusion

Use Illustrator for designing shapes and not for text related document, instead use InDesign for text based document. For simple text based design which consist of 1 or 2 pages Illustrator still can be a good choice but InDesign specialise in creating publications which makes it an ideal choice for text based documents.