Forem: Abhishek Kumar

Understanding defer in Go: Best Practices, and Why It Matters

Abhishek Kumar — Wed, 10 Sep 2025 17:54:38 +0000

Understanding Go's `defer` Statement: A Complete Guide

Have you ever written a Go code? Of course you have - that's why this post is recommended to you! And if your answer is yes, then you might have come across the keyword defer. So let's understand this in detail so that we can write better Go code (after all, as gophers our aim is to write code that works and not fall for anything like other language folks do, haha just kidding).

But What is `defer`?

So if you look for the official definition it goes like: "defer schedules a function call to run right after the surrounding function returns". Ok but what does this actually mean? In simple terms, this means that any function call preceded by defer is added to a stack of deferred calls and will be executed just before the parent function (where the defer is declared) exits.

The deferred calls are executed in Last-In, First-Out (LIFO) order.

So How Does `defer` Work?

Let's take a code example which will help us understand this better and clear up what is the LIFO execution that we talked about earlier. So below is a simple Go code with some addition and some print statements. I think this is a pretty simple yet effective example to understand defer without buzzwords.

package main

import "fmt"

func main() {
    a := 54
    b := 34
    c := a + b
    fmt.Println(c)  // Prints the sum immediately
    defer fmt.Printf("from defer: %v\n", a + b)  
    defer fmt.Println("hello world from defer")
    fmt.Printf("Hello, World!\n")
}

Any guesses what will be the output? Let's look at the output first:

88
Hello, World!
hello world from defer
from defer: 88

Why and How This Happens

Let's analyze the execution flow of Go's defer statement step by step.

Step-by-Step Execution

Immediate Execution:

Computes c = a + b → 88
Prints: 88

Deferring Function Calls:

defer fmt.Printf("from defer: %v\n", a + b)
defer fmt.Println("hello world from defer")

Arguments are evaluated immediately:

a + b → 88
"hello world from defer" is ready
Functions themselves are pushed onto a stack for later execution

Regular Execution Continues:

Prints: Hello, World!

Deferred Functions Execute in Reverse (LIFO):

First, prints the last deferred call:

   hello world from defer

Then, prints the first deferred call:

   from defer: 88

Complete Output

88
Hello, World!
hello world from defer
from defer: 88

Key Takeaways

Arguments to deferred functions are evaluated when defer is encountered
Deferred functions execute in Last-In-First-Out (LIFO) order
Deferred functions run just before the surrounding function returns

More Common Use Cases: File Handling

package main

import (
    "fmt"
    "os"
)

func main() {
    file, err := os.Open("example.txt")
    if err != nil {
        fmt.Println("Error opening file:", err)
        return
    }

    // Ensure the file gets closed when the function exits
    defer file.Close()

    fmt.Println("File opened successfully.")
}

👉 Here, file.Close() is guaranteed to run at the end of main(), even if the function returns early due to an error. This helps a lot in resource cleanup and making sure the file is closed after usage.

Ok, So We've Understood defer, Now Let's Do Something Fun

One interesting trick with defer is reversing a string without using loops or extra arrays. Since deferred functions execute in Last-In, First-Out (LIFO) order, we can take advantage of this to print characters in reverse.

package main

import "fmt"

func main() {
    word := "golang"
    fmt.Print("Reversed word: ")

    for i := 0; i < len(word); i++ {
        ch := word[i] // capture the character immediately
        defer fmt.Printf("%c", ch)
    }
}

How It Works

Each iteration of the loop defers printing a character
Deferred calls are stacked, so they execute in reverse order when main() ends
The result is the string printed backwards:

Reversed word: gnalog

Conclusion

I hope this post has helped you understand defer in an easy and fun way!

Happy coding in Go! 🐹

How to Create a Simple Live Server Extension Using Golang

Abhishek Kumar — Thu, 26 Sep 2024 04:27:46 +0000

If you are a web developer and haven't used the Live Server extension in VSCode, are you even a developer? Just kidding. But have you thought about how that works under the hood? In today’s blog, let’s try to understand how that works with a hands-on implementation using Golang. Why Golang? Well, I am exploring Golang these days, and what’s better to learn than building a project? So enough context (not the one in golang ) let’s get started.

How live server works ?

So the live server automatically reloads the browser whenever it detects any modification in html,css or js files. It began by serving these static files through a HTTP server. Under the hood it employs a file watcher like fsnotify( we are going to use this for our project) , fswatch (in UNIX-based file system) or Chokidar(for Nodejs) to continuously monitor the project’s directory for file changes (basically when you save any file with extensions .html,.css,.js ) .

At the core it Uses a WebSocket connection between the your (node js) server and the browser. When the server detects a file changes it sends a reload notification through WebSocket to the browser. The browser , in turn, reloads the page to reflect the new changes being made. Additionally it uses CSS injection(updating only styles without a full reload) ,HMR(hot module replacement) for javascript module. This ensures the developer get’s a real time feedback without the need of manually reloading the browser after each change in code .

Project overview

So with this project, my idea was the same. My goal was to watch for file changes (like HTML, CSS, and JavaScript) and trigger a browser reload whenever any modifications were detected. For this, I used Go's built-in HTTP server and the fsnotify package, which efficiently monitors file system events.

1. Serving Static Files

The first step was to set up a simple HTTP server in Go that serves static files from a directory. The static files, such as HTML, CSS, and JavaScript, would be loaded from the ./static folder. This is handled using the http.FileServer:

http.Handle("/", http.FileServer(http.Dir("./static")))

2. Reload Endpoint

Next, I needed an endpoint that would notify the client to reload when a file change was detected. The /reload route acts as a trigger, sending a "reload" message to the browser when the server detects a modification:

http.HandleFunc("/reload", func(w http.ResponseWriter, r *http.Request) {
    <-reloadChan
    w.Write([]byte("reload"))
})

This route listens for events on a channel, which will later be populated by file change notifications.

3. Watching File Changes

I leveraged the fsnotify package to track changes in specific file types (HTML, CSS, and JS). The watcher listens for any modifications and pushes a notification to the reload channel when it detects changes:

func scanFileChanges() {
    watcher, err := fsnotify.NewWatcher()
    if err != nil {
        log.Fatal(err)
    }
    defer watcher.Close()

    for {
        select {
        case event := <-watcher.Events:
            if event.Op&fsnotify.Write == fsnotify.Write && isTrackedFile(event.Name) {
                log.Println("Modified File:", event.Name)
                reloadChan <- true
            }
        case err := <-watcher.Errors:
            log.Println("Error:", err)
        }
    }
}

4. Filtering Tracked Files

Not every file change should trigger a reload, so I added a filter that only tracks specific file extensions: .html, .css, and .js. This was done using the filepath.Ext function to check file types:

func isTrackedFile(fileName string) bool {
    ext := strings.ToLower(filepath.Ext(fileName))
    return ext == ".html" || ext == ".css" || ext == ".js"
}

5. Running the Server

Finally, I launched the HTTP server to listen on port 8000 and started the file watching process concurrently:

log.Println("Starting the server at: 8000")
log.Fatal(http.ListenAndServe(":8000", nil))

Final Thoughts

While this example focuses on reloading static files, there's plenty of room for improvement—like adding WebSocket support for smoother communication, better file handling, and expanding the list of tracked files.

With just a few lines of Go code, I was able to improve the workflow for static web development, and I look forward to refining this tool even further.

Check out the code: serve-it GitHub

Building a bill splitting app - splitBhai (1/n) as a side project

Abhishek Kumar — Sun, 15 Sep 2024 11:53:18 +0000

Split Smart, Settle Easy - Simplifying Group Expenses

Picture this: You’re out with your friends for dinner, or maybe you’re planning a weekend trip with your close-knit group. Everyone is having a great time, until it comes to splitting the bill. We’ve all been there—awkward calculations, someone forgetting to pay their share, and the inevitable “I’ll settle it later” promises. But what if splitting bills wasn’t a chore? What if it was fun, efficient, and even a little game-like?

That’s where splitBhaicomes in—a fresh take on managing group expenses that’s smarter, fairer, and way more fun

How did i got this idea to build a bill splitting app ?

Well the answer is the two events that happened which let me think of a solution which could solve these two at a same time ( killing two birds with one stone kind of ..)

The first event was when my friends and I went to Goa for a hackathon. And not just any hackathon—it was my very first one, and what better place than Goa, right? It was a six-day Web3 event (though, to be honest, I’m more of a backend and cloud guy) and it was fun until we got back and saw my friends taking pen and paper to manually calculate all the expenses and i was like WTH ! Guys we have bill spliting apps why don't we use them (they find some apps trashy , not good UI).

That was the first reason , now coming to second reason .. so we are college students and often times we struggle with not having some cash at month end so we ask our friends while going canteens/cafe along with them " hey you pay this time and i will write your assignment or any project submission thing" and i thought hmm kind of barter system( i know not in truest sense but yes) wouldn’t it be cool if there were an app where people could exchange small favors like this? It’s not just about money; it’s about building relationships and creating a sense of community through these little gestures.

and then's when i came up with the idea of making a bill splitting app with group bill sharing feature(so it eliminate manual bill sharing task) and small barter system kind of feature and came up with splitBhai (bro please split the bill and tell me my share of prices)

What Makes splitBhai Different?

There are plenty of apps that split bills. But splitBhai takes things a step further with three game-changing features that set it apart:

1. Debt Settlement with a Barter System

Imagine being able to settle small debts not just with money, but with skills, favours, or shared resources. Did your friend pay for your movie ticket? Instead of transferring a few bucks, maybe you could repay them by picking them up from work or sharing your Netflix account for a month.

This isn't just about keeping track of who owes what—splitBhai enables a barter system, so you can settle debts in ways that fit your life. It’s about fostering stronger connections with your friends while solving the "I forgot to pay" problem in a creative way.

2. Saving Together as a Group

Groups that spend together, save together! With splitBhai, you can create a monthly savings plan with your group. Each person contributes a little bit extra to a collective fund that can later be spent on group activities like weekend getaways, dinner parties, or any other shared experience.

It’s like a mini-crowdfunding feature within the app! Not only does this save you from sudden large expenses, but it also ensures the group always has something fun planned ahead.

3. Gamified Debt Settlement

Paying someone back doesn’t have to feel like a chore. splitBhai brings an element of gamification into settling debts. Earn points for timely payments, or for paying in full without splitting hairs. Maybe you can even challenge your friends to pay their share faster by competing for group rewards. The more involved you are, the better your experience becomes.

It’s More Than Just an App

At its core, splitBhai is about relationships—whether it’s managing your group’s expenses, building trust through bartering, or contributing to group savings. Money is part of the equation, but it’s really about making life easier, fairer, and more fun when you’re navigating the sometimes tricky waters of group dynamics.

And the best part? It’s open-source. and i am excited to invite fellow developers, designers, and creative thinkers to join us in making splitBhai even better.

Want to Join Us on This Journey?

So far, I’ve built a solid authentication and authorization system using JWT, with support for email verification (currently limited to Gmail addresses). Additionally, I’ve integrated Redis for caching results and managing cookie expiration, which ensures better performance and security throughout the app. Also I am using MongoDB as primary Database , AWS for File storage and Deployment , Docker for Containerising the application for smoother deployment . Although Nothing has been done on the Front end part and that is why I am writing this Blog to Invite fellow developer who love building products.

Let’s Build splitBhai Together!

If this idea excites you, and even more so if you’re an Android developer, join the journey! This is just the beginning of splitBhai. With your help, we can turn it into a solid, viable product. Let’s build something amazing together!

Let’s bring a bit of joy back to group expense management—because managing money with friends shouldn’t be stressful, it should be fun. Come join us, and let’s make something amazing together!

Github : https://github.com/abhiraj-ku/splitBhai

Are you ready? Let’s go! 🚀

File handling 101 in Node Js

Abhishek Kumar — Fri, 14 Jul 2023 14:53:39 +0000

if you have ever worked with programming languages like C++, Python or Java then you might have come across a term called "File handling". But If you are a Javascript Developer (which I assume if you are reading this blog), you might not have come across anything as such because there isn't support for File handling in Js. But what if there was a way to use Javascript code to perform file handling? Don't worry Node js has come to your rescue. Let's find out how

Before moving forward we have to understand a few things like what is node js, how node js works & what is asynchronous and synchronous code . Having an understanding of these will help you not only with file handling but in general while working with node js as a backend developer.

What is Node Js? And why is it important?

Node Js is a Runtime environment for javascript.

A runtime environment is a software framework that provides a platform for executing and running applications. It includes libraries, tools, and resources necessary for the execution of code written in a specific programming language.

So what does this mean to you and me who are a javascript developer? Well, it means a lot. Earlier Developers used to write code in a file (index.js) and use a browser to execute our code. Because In those days Only browsers had a runtime environment to execute js code. Javascript was meant to be a scripting language for the Web and that too in the Front-end part.

But now With Node Js, you can run JS code in your local system and perform a lot of tasks. Also with Node js, you can write frontend as well as backend code using MERN (MongoDB, Express, React, Node) or MEAN (MongoDB, Express, Angular, Node). In simple terms, You can Become a full-stack developer using JS only (obviously there are a lot of things like HTML, CSS, database and a hell lot of things).

How to Install Node JS?

To install Node, go to the Node js official site
Click on the 18.16.1 LTS version. It will automatically detect the OS you are using and give suggestions based on that
Install just like you install any other software keeping everything as default.
To check if Node is properly installed on your system or not, Open the terminal/command prompt and type: node -v. If you see the node version written there that means Node is properly installed on your system.
Now you can Write any js code Except the DOM manipulation as it is for browsers. Open the command prompt and type console.log("Hello,World")

You Have successfully executed your first node command(I know it's Js only ). Now that we have understood Node .let's understand Async and Sync code flow and why is it important in file handling.

Async vs Sync code flow

In Node.js, asynchronous (async) and synchronous (sync) operations refer to different approaches for executing code and handling I/O operations

Synchronous: This type of code in Node.js block the execution of the program until the operation is completed. It means that each operation will have to wait for the previous one to finish before moving on to the next line of code. Here's an example of synchronous file reading in Node.js:

const fs = require('fs');
// Synchronous file reading
try {
  const data = fs.readFileSync('test file.txt', 'utf8');
  console.log(data);
} catch (err) {
  console.error(err);
}

Asynchronous: It is completely opposite to sync operation. It does not block the program. It allows the program to continue its execution while the operation is being processed in the background . Async in file handling needs a callback function.

const fs = require('fs');
// Asynchronous file reading with callback
fs.readFile('file.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

Now that we have understood the prerequisites of File handling with Node js. let's go straight to it.

File Handling in Node JS: Reading and Writing Files in Node.

File handling in the node is possible due to a module called fs (file system). It provides all the necessary methods and functions to perform various operations, such as reading, writing, copying, updating, and deleting files.

we will see the syntax of this and will discuss various methods one by one. Below is an example of the sync readFile method. we will see this in detail but for now, let's understand the syntax of this.

const fs = require('fs');
// Synchronous file reading

  const data = fs.readFileSync('file.txt', 'utf8');
  console.log(data);

What are we doing here:

The code imports the built-in fs module, which provides file system-related functionality in Node.js.
The readFileSync a function is called to read the contents of the file named "file.txt".
If the file reading operation is successful, the returned data is assigned to the data variable.
The contents of the file are then logged to the console using console.log(data)

Writing in files: Both Async and Sync operations

Writing Files in sync flow: We can read files by using the fs module's writeFileSync

you can easily retrieve the contents of a file and process them according to your needs. let us see the code implementation of this. As writeFileSync a sync operation it requires two parameters, one is a file name with the proper file extension. For example, if it is a text file so the name will be text.txt and next is the contents of the file.

fs.writeFileSync("./test.txt", "this is sync")   //sync writeFile op

As soon as you type node filename.js in the terminal, it will create a test.txt file in your directory with the content that you have passed. In this case, is "this is sync". Remember this is a sync operation so it will block the other operations, so try to avoid using it.

Writing File in Async flow: In the async example, the WriteFile function initiates the file writing operation and immediately moves on to the next line of code without waiting for the operation to complete. Once the operation finishes, the callback function is invoked with the result or an error.

Note: this is an async operation so a callback function is necessary. Async operations are generally preferred in Node.js for I/O-intensive tasks since they allow the program to remain responsive and handle multiple requests simultaneously.

Reading File in sync way: This will have two params, One is a file name.txt and second is encoding (utf 8 for string )

const readFile = fs.readFileSync("./test.txt", "utf8");
console.log(readFile)   //log the content of test.txt file

Reading File in async way: In this, it will have 3 params, filename, encoding, and callback function with two params which include error and data(you can call it anything) error will used to log if there is any error while reading the file and data is used to log the content of the file.

 fs.readFile("./test.txt", "utf8", (err, data) => {
   if (err) console.log("Error :", err);  //log if any err found
  console.log(data);  //log the content in test file
 });

Appending the file: Let's suppose you want to add some more content in the file but when you use the method discussed above it will over-write anything in it and add the new content in it. But we want to keep both of them so what should we do? There comes the append method which lets us add new content without overwriting the previous content.
Synchronous File appending:

const fs = require('fs');
// Synchronous file appending
fs.appendFileSync('file.txt', 'New data to append', 'utf8');

Async Append:

const fs = require('fs');
// Asynchronous file appending
fs.appendFile('file.txt', 'New data to append', 'utf8', (err) => {
  if (err) {
    console.error(err);
  } else {
    console.log('Data has been appended to the file successfully.');
  }
});

Ok so now that we have basic knowledge of how to read, write, and append files in both async and sync way and which way is best. We are good to go and explore file handling in node js.

Conclusion: File handling in Node JS

Congratulations! You've learned the fundamentals of file handling in Node.js. with the knowledge of the fs modules, you can confidently perform a variety of file operations, read and write data, and append data. By mastering file handling in Node.js, you'll unlock new possibilities for building robust web applications.

This was my attempt to tell you about File handling in node js. I hope you have learnt something today. I write content related to Web Development so if this is your area of interest then you can subscribe to me. I will try my level best to bring more such content in future.

If you are someone looking for a tech writer who can write content about Web Development, You can check my other blogs here . I am available to write content related to this topic.

Connect with me on various Socials:

Linkedin: where I share things I am learning and building

Twitter: I share my mind, and threads related to web dev daily. follow for valuable content there also.

Check out my GitHub, and the projects I am working on. I am a open source contributor also.

Understanding the const Keyword: With Array and Objects in Javascript

Abhishek Kumar — Wed, 12 Jul 2023 09:46:34 +0000

Understanding the const Keyword in Javascript

Whether you're new to JavaScript or an experienced developer, you've likely come across the const keyword. It's a way to declare variables that hold constant values. Once you've declared a variable using const a keyword, you cannot assign it a new value. This makes const it ideal for situations where you want to ensure the immutability of a variable throughout your code.

There are a lot of benefits of using the const keyword here are some of them:

Predictability: Variables declared with const cannot be reassigned, ensuring their value remains constant
const restricts variable scope to the block scope where they are declared

Let's understand with an example what happens when we re-assign values to a const variable.

const a = 10
console.log(a)  //output : 10
a=15;
console.log(a)  //output : TypeError: Assignment to constant variable.

But hey did I say that values declared with const cannot be re-assigned? let's move further with our blog and understand why I chose to write "const is not constant". For this, we will see how const works with Arrays in js only then we will be able to understand this topic of mutability vs immutability

Data types in Javascript

Before moving Further We have to know that there are two types of Data in Js, Understanding these data types is fundamental to working with JavaScript, as they influence how values are stored, manipulated, and interact with each other.

Primitive Data-types: Number, String, Boolean, Null, Undefined, Symbol. If you know about these then well and good & if you don't, google them and read more about them.

Complex Data Types:

Object: Represents a collection of key-value pairs, where values can be of any data type, including functions and arrays.
Array: Represents an ordered collection of values, accessible by index.
Function: Represents a reusable block of code that can be invoked with specific parameters.

let's deep dive more to understand the assigning and re-assigning of the const variable

const a = 10;
a=15 
console.log(a); // Output: assignment error:cannot assign values to const 
b = a;
console.log(b); // Output: 10
b = 8;
console.log(b); // Output: 8
console.log(a); // Output: 10

Here's the breakdown of the code execution:

const a = 10;: Variable a is declared and assigned the value 10 using const. a is a constant variable, and its value cannot be re-assigned.
b = a;: The value of a (which is 10) is assigned to b. Since b is not explicitly declared using let or var, it becomes a global variable.
console.log(b);: The value of b is logged into the console, which is 10 (the initial value assigned from a).
b = 8;: The value of b is re-assigned to 8. As b is a global variable, in this case, it can be modified.
console.log(b);: The new value of b, which is 8, is logged to the console.
console.log(a);: The value a remains unchanged and is still 10. const ensures that a it cannot be re-assigned.

Now that we have understood this, we are ready to understand the const keyword with arrays but Before that we some interesting things to tackle

Understanding Redeclaration & Reassignment

We know that arrays in JavaScript are mutable, meaning their elements can be modified.

let arr =[5,58,9,6,3]
console.log(arr)   //output: [ 5, 58, 9, 6, 3 ]
arr[1]=8      
console.log(arr)   //output: [ 5, 8, 9, 6, 3 ] This shows arrays are mutable

but what happens when we re-assign the value of the arr with new values using the Let declaration? let's see with code examples

//re-assigning primitve data types
let a =15
a=18
console.log(a)  //output : 18 

//re-assigning complex data types
let arr =[5,58,9,6,3]
console.log(arr)    //output: [ 5, 58, 9, 6, 3 ]
arr=[8,6,96,53,12]
console.log(arr)     //output: [ 8, 6, 96, 53, 12 ]

With the Let keyword let's understand these terms before moving forward

Redeclaration: It means changing the memory location of the variable which will throw an error. Note: re-declaration will not throw an error in the case of using var

  let s = 90
  let s=89
  console.log(s)  //SyntaxError:Identifier 's' has already been declared

  //using var keyword to redeclared

  var a = 90
  var a=89
  console.log(a)  //output : 89

Re-assignment: It simply means changing the value of the variable without actually changing the memory allocation

//re-assignment using let and var 

  let s = 90
   s=84
  console.log(s)      //output:84
  //var 
  var a = 90
   a=89
  console.log(a)      //output:89

Now that we have understood the difference between these terms let's look at what happens when we apply these with const in complex data types

Using the const keyword with arrays

const arr =[5,58,9,6,3]
console.log(arr)
arr=[8,6,96,53,12]
console.log(arr)   //TypeError: Assignment to constant variable.

Why did this happen? As we know that once the array is declared with const a keyword it cannot be re-assigned even though we know that array is mutable. So does that means we cannot change the values of the arr if we use the const keyword?

let's look at another code to understand better

//const is immutable but array is not 
const arr =[5,58,9,6,3]
arr[2]=10 
console.log(arr)    //output : [ 5, 58, 10, 6, 3 ]

what just happened here. isn't this code suppose to return an error? how can an array with a const declaration is changed/updated? The answer to this is that const is immutable & It defines a constant reference to an array.

If you know that complex data types are stored in a heap memory in the js engine. when you do something like this (given below). Both the variable are referencing the same array and so if you make changes to one the other one will also be affected:

let arr=[1,2,3]
abb=arr
abb.push(10)
console.log(abb)   //output:[ 1, 2, 3, 10 ]
console.log(arr)   //output:[ 1, 2, 3, 10 ]

but in the case of primitive data type when you do this same thing(given below) you will get a new variable and both the original and duplicate variable will have completely different reference

let a =10
let b= a
b= 18
console.log(b)    //output:18 
console.log(a)  //output : 10

So when you do const arr =[1,2,3] you are restricting the reference to this variable but you can still perform all the array methods but you cannot re-assign the complete new value to the const array:

const a =[1,2,3]
a.push(1,58)  //pushed new valued at the end of a
a.pop()       //removed the last value 
console.log(a)   //output :[ 1, 2, 3, 1 ]

Conclusion

So I hope now you would have understood "why an array declared using const can still be modified". Understanding these things will make you a good JS developer and these things will be asked in the interview. So make sure you revise these topics well before your interviews.

If you still have any doubts then you can use the comments section to ask your doubts. To understand JS from a more micro level I would recommend you a playlist called Namaste Javascript by Akshay Saini on Youtube he has some of the best js videos on the internet. Do check this playlist.

Thanks once again if you have read till here.

Connect with me on socials :

Twitter

Github

How to Create and Publish a Package on NPM: A Step-by-Step Guide

Abhishek Kumar — Sun, 09 Jul 2023 08:00:28 +0000

If You are into Software Development and you don’t know What is npm or a package? what are you even doing … But don’t worry by the end of this blog you will be able to understand What npm is, what is a npm package and How to make one for you and publish it so that others can also use it. Now Enough of this rant let’s get straight to the point and learn and understand for what you are here.

First of what is NPM and why you as a developer should know this? NPM Stands for Node Package Manager and as the name suggests it is a Package Manager for Javascript. It allows developers to easily install, manage and share Reusable codes called modules/packages to make applications efficiently.

Let’s make an analogy with Google Play Store / Apple App Store to understand it even better. You use these stores to download any apps or games ( sometimes movies or books also ) or if you are a developer you can also upload your own apps/games onto these platforms for a fee. Now in the same way NPM is a store for Developers like you and me to install or share(publish) our codes in the form of modules or packages as we say.

But Wait why do we even need packages in the first place ?

Imagine a situation in which you are given the task of building a car (I know this is an extreme example, haha) so what will do? Are you going to build every part of the car from the engines to the structure of the car to the tires?

No, Right because rather than reinventing the wheel we will import some parts and develop only crucial parts in-home so in the same way instead of writing code for everything from scratch we will use a package built by other devs so that we can focus on building important things on application. Plus it also provides a lot of features You can just google it and you will find a lot of articles/blogs explaining this.

So what do we need to make/build a package from scratch?

*in order to make a package by yourself You need these 3 things :
*

Node js - Node is the javascript runtime environment to run your javascript code locally on your system. To install this click here and click on the option shown in the image below and rest just follow the steps like you install any other software.
After installing Open Terminal and type node -v. if you get something like v18.12.1 (this is the current version on my system) the node is properly installed on your system.

NPM - npm comes pre-installed with node. To verify do the same in the terminal, type npm -v. you will get 8.19.2.
You need some basics of Javascript & ES6 versions because we going to make this package in JS.

**
Now we are all set to make our first Package. next thing we need is to set up Our Project:**

Create a new directory for your project using mkdir project-name the command.
Navigate into the project directory using cd project-name.
Initialize the project as a Node.js project by running npm init command.
During the initialization process, you'll be prompted to enter details such as the project name, version, description, entry point, test command, repository URL, and more.
Provide concise and accurate information for each prompt.
Consider using the default values for prompts that are not relevant or leave them blank.
Use descriptive names and versioning following best practices.

Now that we have set up these things next we need to write the code and Logic for our package. But Wait what are we gonna make? We are going to make A simple package that gives you the tweet id: https://twitter.com/abhirajabhi312/status/1676605825446555650 (btw you can follow me on Twitter where I share my learning and thoughts) If you see the last thing in this URL is the id that we are talking about

*Setup your directory :
*

Make an index.js file and type the code of your package

Now that we have our code ready let’s publish it on NPM.

To publish your Package on NPM you need to have an account on npm. Go to NPM > sign up

Now Go to your project in vs code and open the terminal type ctrl+` (this is called the tilde sign ) and it will open a terminal screen for you.
The first step is to type npm login in order to log in. It will then ask for your npm username, password and your registered email id. After entering the required information, npm will authenticate your credentials. To check type npm whoami if your username is displayed that means you're logged in.
Now type npm publish . it will take some time depending on the size of the package. After some time you will see that your package is published along with your package details which have been provided during the setting up of your project.
To check go to npm and type your package name. You will see all the details of your package.

This is the same package I uploaded on Npm. You can check here

Now that you have understood what is npm and how to make your very own npm package. Go ahead and make some cool packages that you think make other developers' life and easy.

If you have made till here that means You now have all the knowledge in order to make your package and publish it on npm.

I will try to post such useful content more in the future for now if you found this useful, don’t forget to share and subscribe to my newsletter. A Big Thank You

Creating your Chrome Extension: A Step-by-step Guide

Abhishek Kumar — Sat, 08 Jul 2023 16:50:39 +0000

if I ask you one question, have you ever used Grammarly or an Ad Blocker while browsing Chrome or for instance any browser like Firefox or Edge? Your answer would be yes, And what are they? They are called Extensions. So in this blog, I will guide you on how to make your Chrome extension from scratch.

What is An Extension and why should we use them?

Before we start coding, let us understand what is an extension. It is a small program written in HTML, CSS and javascript and interacts with the browser through API(Application Programming Interface) provided by that browser to add certain functionality like Adblocker or Password Manager to enhance your browsing experience.

We can use them to customize or add functionalities that are not provided by the browsers. You Can find these extensions from the respective web stores of your browser for example Chrome web store for Chrome, Add-ons for Firefox.

You can choose an extension based on your specific needs like productivity, password manager, ad blocker, video speed controller and much more.

What are the things required to make an extension?

Well in order to make an extension you need three things, let's discuss what are those things in brief:

Idea: What is your extension going to do, what will be its core features and functionalities? In this case, we going to make an extension whose only job is to remove any element on a website when we click on it. Let's call it Section Eraser
Next, Set up a development folder: Create a dedicated folder on your computer to organize your extension's files. Name that folder as Section Eraser (you can give any name if you want, it is just that name defines what are we going to make)
Basics of Html, CSS and javascript as these are things we will use to code our Chrome extension.

Coding our extension

Open vs code and navigate to your section eraser folder. Then Create these files:
popup.html: This HTML file represents the user interface of your extension's popup window, which appears when users click on the extension's icon. This a very basic extension that has only one heading and a button, nothing fancy

Manifest .json file and why is so important while building your Chrome Extension?

Next, we need to create a manifest.json file. This file is a crucial component when creating a Chrome extension. It serves as a configuration file that provides essential information about your extension to the browser.

let's understand the core components of this file :

manifest_version: Specifies the version of the manifest file format. Currently, the version is 3.
name: The name of your extension.
version: The version number of your extension.
description: A brief description of what your extension does.
icons: An object that defines the icons used for your extension in different sizes.
permissions: An array that lists the permissions your extension requires, such as accessing tabs or specific websites. Specify the required permissions based on your extension's functionality.
action: Specifies the behaviour of the extension's browser action (typically the icon displayed in the browser's toolbar).
default_popup: The HTML file that serves as the popup window when the user clicks on the extension's icon.
default_icon: An object that defines the default icon for your extension in different sizes
scripts: An array of JavaScript files that make up the background script.
background: Specifies the background script that runs in the background and handles

Next, we need to create three .js files popup.js content.js and background.js These are our main js files where we will write all our logic and API to perform the desired action.

let's start with a popup.js file this will be our main file

this code waits for the DOM to be fully loaded (DOMContentLoaded event) and then adds a click event listener to a button with the ID "select-button". When the button is clicked, it retrieves information about the active tab and sends a message to the content script in that tab, indicating that a section should be selected (the message payload { selectSection: true }). You can refer to the Chrome API developer section to know more.

next is content.js file Content scripts are JavaScript files that are injected into web pages by the browser when the extension is activated on specific web pages or matches certain URL patterns. In Our case, it is to detect a click event on a section of a website and then remove that section

Next is the background.js we have discussed this code so we are not going to discuss now

You can add some styling to your extension. it's up to you. After that add some icons for your extension which have specific sizes like 16*16,48*48,128*128 and make sure they are jpg or png

Now that we are done with the Coding part , let us check/test our extension but before moving forward let's have a look at our final folder structure

Testing our extension using the Chrome browser

Open Chrome browser and type chrome://extensions/ in your URL section. it will open the Chrome Extension page.

Now Click on Developer Mode on the right side of the screen. it will give you three buttons as you can see in the above image
Now click on the Load unpacked button, It will open a popup screen asking you to upload your extensions folder containing all the files we have discussed. Upload them
After some time you will see your extension (see in the above image) on this page along with other extensions you have already installed.
To check, open any website, then click on your extension icon, it will then open your extension popup with a button, now click on that button, after that click on any section of that website and see the magic, it has removed that section

Note: you can use this code to make your extension.

Congratulations! You've successfully learned the step-by-step process of creating a Chrome extension. Now go ahead and make some cool extensions and share it with others

If you have made till here, Thank You for reading, Share and subscribe to get more content like this in future