<![CDATA[Hemant's Engineering Blog]]>https://blog.hemantsharma.techRSS for NodeWed, 15 Apr 2026 03:30:21 GMT60<![CDATA[What is Docker, Containers, Dockerfile, and Docker Images?]]>https://blog.hemantsharma.tech/what-is-docker-containers-dockerfile-and-docker-imageshttps://blog.hemantsharma.tech/what-is-docker-containers-dockerfile-and-docker-imagesThu, 27 Nov 2025 08:08:48 GMTDocker

Docker is a containerization platform that allows developers to break-free from the problems such as - “It works on my machine“ by letting them developing, running and shipping applications seamlessly by containing the applications/code/project into a container providing it all the resources it ever will to run smoothly and work as expected.

Before we dive into Docker and it’s related technologies we first need to understand the main underlying concept behind Docker. Containers. Containers are the technology that built up the open platform known as Docker. It’s like Google took the Linux kernel and made Android OS.

Containers

So, what are containers anyway?
Well, Containers in general are nothing but isolated, lightweight, and self-sufficient packaged units that includes an application's code, runtime, libraries, and configuration files.

If I have to summarize a gist of what Containers are actually are, I believe this is the best analogy that works for me and might work for you as well

Containers are the “just-enough” file-system, environment, kernel or configurations that are required by your Software to run just how it is intended to run. If it needs a file-system to read local files for some reason, Containers include it the “just-enough” requirements.

Containers indeed are a really really great piece of engineering that allows you to isolate your applications withing the environment they need to operate and perform at it’s fullest capabilities.

Dockerfile

Now that we know well about what Containers are and how Docker provides you the ease of use while working with containerization technologies, let’s dive deeper into how you can weild this power that Docker has to provide you with.

Dockerfile, it is the spec-sheet of your container, you define all the requirements your application software requires in order to work just how it is intended to and perform at its best without any issues. In other terms, you can say that you want to build a PC and when you do it, you first want to decide upon all the specs you want in your PC like the processor, amount of memory and storage you would want out of your system, so Dockerfile is the file where you write it to Docker Engine all the requirements and setup you need in the container you would be putting your application in.

💡
Dockerfile has no extensions and it is just written in the file - Dockerfile
FROM node:22-alpine AS base

FROM base AS deps

WORKDIR /app

COPY package.json ./
COPY index.js ./

RUN npm i -g pnpm
RUN pnpm install

EXPOSE 3000

CMD ["node", "index.js"]

Docker Image

Now that you have successfully defined all your requirements and needs in the container, you are now ready to move ahead an build an image for your container.

Docker Image is created after all the requirements & configurations you have mentioned in the Dockerfile spec-sheet and build it using the command

docker build -t myapp .

-t stands for tagname for the Docker Image that you are building so that you can easily refer it in the list of Docker Images you might have in your Docker Desktop application or OrbStack if you prefer that.

The command above tells Docker to create a new Docker Image of you spec-sheet. It’s like a confirmation and contract between you and Docker, that now this Image is the final spec-sheet of your requirements as mentioned in the Dockerfile, like how developers use Git, you first add your changes to the staging area for any modifications and from thereon it is pushed as a commit after one extra step, here as well, Dockerfile let’s you have a customised spec-sheet, but the Docker Image that is built upon the provided Dockerfile.

💡
Docker Images are final contracts of Dockerfile, once a Docker Image is built, you cannot customize or change it at all, in order to customize it, you will have to make changes in the Dockerfile and rebuild a new Docker Image.

Docker Images are shareable, you can share them by pushing them to the Docker Hub and share it with anyone for them to pull it from there. The reason why Docker Images are untouchable are so that it keeps and maintains the integrity and safety of your software application or whatever you might want to contain in the container through the Docker Image. If you shared the Dockerfile directly, it is easily prone to changes and modifications which in turn would break the integrity and whole purpose of your application software, so this is a feature of Containerization technology that prevents any infringement of your application software.

Docker Images are later run to spin up a container adhering to the configurations, requirements and features that are requested in the Docker Container.

Docker Container

You can spin up containers using the Docker Images that we created in the last step, and it is very very easy and straight up to do. The command below is what helps your spin up a container adhering and following the Docker Image of your custom specs and requirements. You can refer to these docs if you want to know more about the run command.

docker run -d myapp

-d in the command stands for running the container in detached mode. Detached mode allows the container to run independently in the background not hindering your terminal where you run it from and only return you the container id of the container you just spun up.

If you have a server in your app, you need to map the host system’s port with the isolated container’s system’s port, meaning you need to map the port of your system to the port of the container running in isolation to make sure that you can access the server running inside the container on your system.

docker run -d -p 3000:3000 myapp

# OR

docker run -dp 3000:3000 myapp

-p stands for port mapping in the said order HOST_PORT:CONTAINER_PORT, meaning, make the port CONTAINER_PORT running inside the container transmit all the data and everything it is working with to the HOST_PORT of the host’s system.

Mindmap - Visualizing everything

Let’s Visualize everything that we learnt so far. This is a simple and easy to understand diagram that I built.

Congratulations🎉 for making it till the end, I hope I was able to make you understand all the nitty-gritties of what Docker and Containerization technology is.

You can find me on

Twitter: hemantsharma.tech/x LinkedIn: hemantsharma.tech/linkedin GitHub: hemantsharma.tech/github Website: hemantsharma.tech

]]><![CDATA[Stop Breaking Your Forms: Type-Safe Server Actions in Next.js]]>https://blog.hemantsharma.tech/stop-breaking-your-forms-type-safe-server-actions-in-nextjshttps://blog.hemantsharma.tech/stop-breaking-your-forms-type-safe-server-actions-in-nextjsSat, 11 Oct 2025 15:50:25 GMT
💡
Full Working Code: GitHub Link

Problem: Inefficient Forms

I have been building forms in applications for years at this point and after building so many forms, I found out some real issues that always stand in place if you want to scale your application because then you would need real strict conventions for your entire stack. When I was building one of my side projects, I was simply building the form just how the docs or any other blogpost suggested on the internet but sooner as my project grew in size, I found several difficulties maintaining the form and the engineer in me thought it wasn’t quite OK to be honest. The form gave me no confidence in pushing it to production as there were multiple return statements in places then too many if-else blocks in my client component it just created cognitive load and didn’t quite work well for complex forms handling multiple data types and different situations and that was when I decided I need to find a proper solution to this, I dug deeper over the internet and docs and questioning LLMs everywhere I found almost the same solution that I was already implementing that’s when I decided to think through forms myself and I came upon this really good solution myself.

Solution: Stateful Contracts

Let’s think of forms in the aspect of “States“ (like states of matter or even state in React if you would). States are an analogy we can apply on forms as well. Any form can have states, for e.g. a form with just 2 fields has a total of 3 states for it’s fields - none filled, 1 filled, all filled. So that means our forms can be in any state and in order to not flush out the input values from the user, we always try to maintain the input data. So in order to maintain the state of our forms we are going to be using the useActionState() hook from React.

Next up, Types!

Types are a really really great way of reducing runtime bugs or even catch bugs in comilation of your code before it hits production ensuring you have a really great developer experience and boosted confidence in your code in production, eventually reducing the 3 AM debuggings you had to do 😂

I have not seen much solutions where developers apply types to React hooks but for a matter of fact and saviour, these hooks do have Types support! I don’t understand why we don’t use types as often, it might increase development time a little bit, but at least after that you have a peace of mind about your code not breaking in production at least without any reason.

Let’s see the solution in Action!

Complete code to copy/refer has been provided at the end of this explanation section

We will create a form where I expect the user to fill in Name, Email, Age. So we have data types of string and number.

.

Since our forms are states and would be using useActionState hook consider extracting away the form from your server component since we will need to make the form a client component, we first create a TypeScript Interface that looks something like this

remember to export the interface since we are going to need it in our server actions as well since this is what is our Stateful Contract that will be communicated between the form and the server action.

After this we create a new file where we describe our server action and this is how thing look initially

Let’s begin by adding the useActionState hook for the form

as of this, let’s ignore any warnings and errors since we are creating a fully typed form and server action contract this is what’s expected, the TypeScript compiler will definitely throw error at you that is what’s going to force you to write a really good and type-safe code.

I have udpated the server action to be inferring the same types, for the sake of this blog, I won’t be performing any network calls like submitting or anything since that is not our concern in this case

Notice how I have wrapped the age in Number because I have inferred the return type as the contract interface that we defined initially which forced me to make that string value a number since that is what we expect to be.

Now I update the component and add types to my useActionState hook to ensure a proper contract between the form and the server action.

Now that we have completed the solution to the problem, let’s handle the formState using useEffect or you can even handle it in your TSX if you want.

This way we are going to ensure that we don’t exchange any data among the form and the server action that is not present in the interface that we created initially.

I also updated the Server Actions and added some basic validation

This practice of adding type to the useActionState hook and the Server Action return type, TypeScript forces us to make sure the exchanging the data is not hindering the contract and ensure seamless two-way data binding.

Now if you want to add any new field in the form, you will be prompted through an error in both the places in Server Action and the React form that tells you to add it to the contract lowering your chances of breaking anything in production.

Final Code

page.tsx

"use client";

import { useActionState, useEffect, useState } from "react";
import { submitForm } from "./action";

export interface FormState {
  name: string;
  email: string;
  age: number;

  error?: string;
}

export default function Home() {
  const [formValues, setFormValues] = useState<FormState>({
    name: "",
    email: "",
    age: 0,
  });
  const [formState, formAction, isFormPending] = useActionState<FormState, FormData>(submitForm, formValues);

  useEffect(() => {
    if (formState.error) {
      alert(formState.error);
    }
  }, [formState.error]);

  return (
    <form action={formAction} className="flex flex-col gap-4 max-w-sm mx-auto py-10">
      <label htmlFor="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        value={formValues.name}
        onChange={(e) => setFormValues({ ...formValues, name: e.target.value })}
      />
      <label htmlFor="email">Email</label>
      <input
        type="email"
        name="email"
        id="email"
        value={formValues.email}
        onChange={(e) => setFormValues({ ...formValues, email: e.target.value })}
      />
      <label htmlFor="age">Age</label>
      <input
        type="number"
        name="age"
        id="age"
        value={formValues.age}
        onChange={(e) => setFormValues({ ...formValues, age: Number(e.target.value) })}
      />

      <button type="submit">{isFormPending ? "Submitting..." : "Submit"}</button>
    </form>
  );
}

action.ts

"use server";

import { FormState } from "./page";

export async function submitForm(previousState: FormState, formData: FormData): Promise<FormState> {
  const submittedFormValues = {
    name: formData.get("name") as string,
    email: formData.get("email") as string,
    age: Number(formData.get("age") as string),
  };

  console.log("submittedFormValues", submittedFormValues);

  if (submittedFormValues.name === "") {
    return {
      ...previousState,
      error: "Name is required",
    };
  }

  if (submittedFormValues.email === "") {
    return {
      ...previousState,
      error: "Email is required",
    };
  }

  if (submittedFormValues.age === 0 || submittedFormValues.age < 0) {
    return {
      ...previousState,
      error: "Age is required and must be greater than 0",
    };
  }

  return submittedFormValues;
}

This way we can handle the errors and the data gracefully while still maintaing the Form State

]]><![CDATA[How to Send Emails Using a Third-Party Provider in Appwrite]]>https://blog.hemantsharma.tech/how-to-send-emails-using-a-third-party-provider-in-appwritehttps://blog.hemantsharma.tech/how-to-send-emails-using-a-third-party-provider-in-appwriteWed, 05 Feb 2025 09:55:16 GMTWhen you are developing your application using Appwrite as your BaaS, you will have situations where you will be needing to send emails to your users. Appwrite has a feature called “Messaging“ for this situation where you can setup your mail server into Appwrite as you mail provider and use it to send mails to your users.

Let’s understand how this works

Follow these steps to get to the feature

  1. Go to your Appwrite Admin Console here and go to your specific project you wish to use the messaging feature in

  2. Go to your project and there you will find a sidebar with some options in it, it should look like this, and go to the option “Messaging“.

  3. Now this is the Messaging section, here you will have all the settings and features to manage everything related to emails, push notifications and SMS to your users.

There are a few terminologies which you will need to understand before we start.

Messages

Messages are the section that keep a log and history of all the messages sent to your users through Appwrite be it Emails, Push Notifications and SMS.

Topics

Topics are used to deliver messages to groups of users at once. Let’s say that you wish to target a specific group of users, let’s say the users using any paid plan of your app, only those users needs to receive the mail, here in topics you can manage it accordingly.

Providers

Providers are the mail servers that you are using to send emails, these providers such as Zoho, you will be setting up here and using here in Appwrite to allow Appwrite to send emails to your users.

Setup Third-Party Email Provider in Appwrite

In order to setup a third-party provider in Appwrite, we will have to go to the Providers tab and click on the Create Provider button as shown below and select the option Email

Then you will be taken to a new page, there you will have to setup your provider by providing the details, add a name to your provider details and select the option SMTP (Generic SMTP server) and click Next.

After this we will be taken to the next step into the settings section, here we will have to be setting up the rest of the required details of the mail hosting server. In my case, I am using Zoho Mail as my SMTP server, so I will be filling in the details accordingly, you can simply Google your mail provider details and fill it up here.

You also need to fill up the Sender email and name, this will be the mail ID you wish to use to send the mails from your mail server and then click on the Create Button.

Now you will have a mail provider created for your Appwrite Messaging service and it should be looking like this in your console window

Send Emails from the Third-Party Email Provider using Appwrite

Now that we have setup our third-party email provider in Appwrite, we can use this to send emails to our users. Let move to the Messages tab in the console and create and send a new message to our user. Click on the Create message Button and select the Email option from there

Here we can write out email, we can also send HTML based mails to our users for better UX and a great reach. Let’s user HTML mode to send our first test email.

Click on Next, and in the next step, we have the option of selecting our targets. Targets are basically the users to whom you wish to send the email to using the option Select targets

so we simply select a user and click on Add

and click on Next, in the next page we will be asked to select a schedule when to send the message, since this is a test email, we can simply send this email to our users immediately, do note that This action is irreversible.

Your email will be scheduled into processing immediately by Appwrite servers. Since I sent this mail to my own email, we can see that I received the email exactly how I sent it!

Connect with me on 𝕏, LinkedIn, GitHub and hemantsharma.tech

I h*ope you found this blog post helpful. Stay tuned for more posts!🙌*

Hope this blog was helpful to you, Please like the blog and write your valuable comment below, you can also ask any queries you have.

]]><![CDATA[Custom CSS variables in custom Tailwind Animations Config]]>https://blog.hemantsharma.tech/custom-css-variables-in-custom-tailwind-animations-confighttps://blog.hemantsharma.tech/custom-css-variables-in-custom-tailwind-animations-configWed, 14 Aug 2024 05:55:54 GMTHow many times have you experienced the need to create custom animations in your project? I have experienced this many times. I have used Tailwind CSS for a long time, and I love it. But sometimes, I need to create custom animations that are not available in the default Tailwind CSS configurations and that too with custom dependable variables, like I want the animations to be updated based on the theme/setting of the website.

In this blog post, I will show you how you can create custom animations in Tailwind CSS using custom CSS variables and how you can update the animations based on the theme/setting of the website using custom CSS variables in the Tailwind CSS configuration.

Custom CSS variables

Custom CSS variables are a powerful feature in CSS that allows you to define your own variables and use them throughout your CSS. You can define custom CSS variables using the -- prefix followed by the variable name. For example, to define a custom CSS variable for the primary color, you can use the following code:

:root {
  --variable-height: 100px;
}

You can use the custom CSS variable in your CSS using the var() function. For example, to use the custom CSS variable for the primary color, you can use the following code:

.element {
  height: var(--variable-height);
}

Custom CSS Animations

To create custom animations in your CSS, you can use the @keyframes directive. For example, to create a custom animation that fades in an element, you can use the following code:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

You can use the custom animation in your CSS using the animation property. For example, to apply the fadeIn animation to an element, you can use the following code:

.element {
  animation: fadeIn 1s ease-in-out;
}

Custom CSS variables in Tailwind CSS animations

To create custom animations in Tailwind CSS using custom CSS variables, you can define the custom CSS variables in the Tailwind CSS configuration file. For example, to define a custom CSS variable for the primary color, you can use the following code in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      animation: {
        fadeIn: `fadeIn 0.5s ease-in-out`,
      },
      keyframes: {
        fadeIn: {
          from: {
            opacity: 0,
            transform: "translateY(var(--variable-height))",
          },
          to: {
            opacity: 1,
            transform: "translateY(0)",
          },
        },
      },
    },
  },
};

This code defines a custom animation called fadeIn that fades in an element and moves it from the top of the screen to its final position. The animation duration is set to 0.5s, and the easing function is set to ease-in-out.

Since our tailwind.config.js file is a using a custom CSS variable --variable-height, we can update the animation based on the theme/setting of the website by updating the value of the custom CSS variable anywhere within our project using simple JavaScript.

Example

Here is an example of how you can update the value of the custom CSS variable --variable-height based on the theme/setting of the website using JavaScript:

Suppose we have a button that toggles the height of a div element and we want another div element to animate based on the height of the first div element. We can use the following code to achieve this:

const button = document.querySelector(".button");
const div1 = document.querySelector(".div1");
const div2 = document.querySelector(".div2");

button.addEventListener("click", () => {
  div1.style.height = div1.style.height === "100px" ? "200px" : "100px";
  div2.style.setProperty("--variable-height", div1.style.height);
});

In this code, we are updating the value of the custom CSS variable --variable-height based on the height of the first div element whenever the button is clicked.

Conclusion

Custom CSS variables are a powerful feature in CSS that allows you to define your own variables and use them throughout your CSS. You can use custom CSS variables to create custom animations in Tailwind CSS and update the animations based on the theme/setting of the website.

Connect with me on 𝕏, LinkedIn, GitHub and hemantsharma.tech

I hope you found this blog post helpful. Stay tuned for more posts!🙌

]]><![CDATA[Access Windows File System in WSL Ubuntu]]>https://blog.hemantsharma.tech/access-windows-file-system-in-wsl-ubuntuhttps://blog.hemantsharma.tech/access-windows-file-system-in-wsl-ubuntuFri, 05 Jul 2024 12:55:46 GMTIntroduction

As you might have been using WSL to harness the power of Linux within your Windows Operating System, it might be true that you might not be knowing how to access the windows file system (files basically) through WSL Ubuntu and it's also true that the regular CMD in Windows is not a really liked one by the developers or programmers and is actually not that great when compared to Unix so WSL is actually a savior for Windows users who cannot really switch to Linux due to some applications maybe not working on Linux and only support Windows. In this blog, I will be guiding you through how you can achieve the same.

So, let's begin...

Follow these steps to gain access to Windows File System using WSL Ubuntu

  1. Open Windows Terminal, and open your WSL terminal

  2. Now that your WSL terminal starts at this location <username>@YourPC you must be trying to check if the Windows File System is present in this directory or not using the ls command but must have been seeing an empty directory and might think how you should go from here as it is the root directory, but let me tell you one thing, you can actually go back from this location which you can checkout using the ls -a command and you will see that you can actually go back from this present working directory.

  3. After you go back from this location to two directories back, you will see that you have a directory present in the location that is the /mnt directory and that is what we need, that is the directory that you need to go in in order to access the Windows File System!

  4. Now, we enter the /mnt directory and we can see our Windows File System, we can here see all the drives that are present in our machine with the directory names are equivalent to your drive letters like the Local Disk (C:) will be the /c directory.

So, here you have it! You can now access any of the required drives from your Windows File System through WSL Ubuntu and still use the Linux commands on Windows Files!

If you like my blog, please do like it!!!

You can connect with me on the following:

]]><![CDATA[Emmet in ReactJS JavaScript JSX]]>https://blog.hemantsharma.tech/emmet-in-reactjs-javascript-jsxhttps://blog.hemantsharma.tech/emmet-in-reactjs-javascript-jsxSat, 15 Jul 2023 15:30:50 GMTLearn how you can enable using Emmet in ReactJS JavaScript.

Follow the mentioned steps

  1. Open Visual Studio Code.

  2. Open Settings using the following commands,

    1. Mac: Command (⌘) + ,

    2. Windows: Ctrl + ,

  3. The settings page would look like this

  4. Make sure to head over to the Workspace tab,

  5. Now search for the "Emmet" option by typing in the emmet in the search field,

  6. Now search for the section: "Emmet: Include Languages" as shown in the picture,

  7. Here you can add a new item to tell emmet what are the areas you want it to work in, now click the Add Item button and type the following in and press the OK button

Congratulations 🎉 !!! Now you will be able to use emmet in JavaScript in React just like you do it in the HTML files.

Connect with Me🔗👾

Twitter: https://hemantsharma.tech/x
LinkedIn: https://hemantsharma.tech/linkedin
GitHub: https://hemantsharma.tech/github
Website: hemantsharma.tech

]]><![CDATA[Get YouTube API and build projects👾]]>https://blog.hemantsharma.tech/get-youtube-api-and-build-projectshttps://blog.hemantsharma.tech/get-youtube-api-and-build-projectsMon, 12 Jun 2023 04:50:39 GMTDo you want to get YouTube Data API? Well, you're at the right place, I'll let you know how you can get and YouTube API key so that you can use it however you wish...

Step 1: Make a Google Developer Account🧾

To get access to YouTube's API you'll first need to make a Google Developer Account which is as easy as logging in to your Google Account, you can easily build one from here.

Step 2: Log In to Google Developer Console🎮

Go to this link console.cloud.google.com, then log in with your Developer Account that you have just created.

Now that you're logged in to your Google Developer Console, you will see this screen after logging in.

After you log in, click on this button

After you click on that button, you'll have a dialog box open up like this,

Step 3: Create a new project🆕

On the dialogue box opened above, click on the "New Project" button and you will be taken to this page for the registration and creation of the new project,

Create the project and once you are into your new project, head over to the navbar and select the API & Services section, here you will see every detail regarding your project's API scenario, on that page you will see this button "Enable APIs and Services" click on it,

You will be taken to a new page, scroll down to find this option,

Select "YouTube Data API v3".

Step 4: Get your API key🔑

On selecting the option for "YouTube Data API v3", you will see an option of enabling the API, enable it.

After you enable it, you'll see this page,

On this page, select the option "Create Credentials", on selecting the option, you'll see this page,

Select the API and select the option "Public data" and click on Next, then you will be taken to the next step. Congratulations, you just got your new YouTube API.🎉

Now you should copy and keep your API safely and use it however you wish to, now that you have learned how to generate an API Google Developer Console, you can also manage and tinker with the details of the API on the console.

Step 5: Read the docs (Optional)

If you wish to use the API to its fullest potential, read the docs for YouTube Data API v3 here.

Happy Coding!👨‍💻

]]><![CDATA[Use Intel architecture terminal shell on Apple Silicon Macs💻]]>https://blog.hemantsharma.tech/use-intel-architecture-terminal-shell-on-apple-silicon-macshttps://blog.hemantsharma.tech/use-intel-architecture-terminal-shell-on-apple-silicon-macsWed, 01 Feb 2023 11:03:51 GMTTo use the Intel-based terminal on an Apple Silicon Mac, we need Rosetta, to install using the command given below to install Rosetta on your Mac:

Install Rosetta

softwareupdate --install-rosetta

Now, that Rosetta is installed on your Mac, you can execute any command on your Mac terminal through the Intel architecture using the prefix arch -x86_64. To check out which architecture you're currently using type the following command on your terminal

arch

After typing the above command your terminal might have returned the value arm64 which means that you are currently using Apple Silicon-based terminal as such.

Now, If you wish to use the Intel architecture only once you can use the arch -x86_64 followed by the command you wish to execute for example

Use the Intel architecture terminal

Now, If you wish to completely use the terminal on Intel architecture without needing to type the prefix arch -x86_64 all the time for every command, we can simply log in to the Intel terminal through the command:

arch -x86_64 $SHELL --login

To confirm whether you are successfully logged in to the Intel architecture terminal, you just need to type the arch command again and if it returns i386 then congratulations you've successfully made your Apple Silicon Mac run the Intel architecture terminal🎉

A like is appreciated if this blog helped you with your required topic :)

]]>