DEV Community: Olibhia Ghosh

My First Hacktoberfest Experience

Olibhia Ghosh — Mon, 04 Nov 2024 06:45:17 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

Hello everyone!

I’m glad to share that this year I participated in Hacktoberfest 2024 and I completed it successfully. Today I will be sharing my Hacktoberfest experience with you all with the hope that you will learn something or get inspired from my experience.

So let’s start with What Hacktoberfest actually is.

What is Hacktoberfest?

Hacktoberfest is a month-long annual celebration of open-source software. It takes place in October.

For more details check the website: https://hacktoberfest.com/.

How did I get to know about it?

As I am active on Twitter and share my learnings there, I got to know about Hacktoberfest from there only.

You can check my Twitter profile here: https://x.com/OlibhiaGhosh .

One of my Twitter friend shared his registration for Hacktoberfest around 15 days before October and that caught my interest. I explored more about that and found it interesting.

This buzz around the Hacktoberfest gave me the kick to participate and I registered for it.

And this was all about how it started.

What were my expectations from it?

Frankly speaking, as I was previously well-known to the world of open source and had already contributed, I was confident about making successful contributions.

But I was also quite nervous about the fact that in this rush of Hacktoberfest month, would I be able to get myself assigned to 4 or more issues or not.

And I jumped into this with this mixture of confidence and nervousness.

Getting Started

Now, let’s talk about the main things that are how I managed to find suitable repositories, got assigned to issues, and was also able to successfully get my PR merged.

At first, I will share how I found repositories to contribute.

How I found repositories to contribute?

There are several ways of doing this but I will be sharing the one that worked for me.

I went to the website of Hacktoberfest and dived into the participation section. There I got the list of repositories participating on GitHub and other platforms.

From there I selected my preferred coding language and filtered out the repositories so that I could contribute easily.

Note: One thing that you should keep in mind is that you should select those repositories which has been updated recently or had the last activity recently.

How I found the issues for my contribution?

Now, after selecting the repositories, I opened it, and at first had a look on the Readme. This helps you to understand the projects better.

Then I dived into the issues section. Then I filtered out the desired issue on two basis:

First, I filtered out all the issues with the label #hacktoberfest using GitHub’s advanced search option.
Secondly, I filtered it out more by selecting “No assignees” from the assignee’s section under GitHub’s advanced search so that I don’t waste time on exploring the issues that are already assigned.

My Contributions

This was all about how I found repositories and issues. After finding the issue that was still not assigned and that I could work on, I made a comment that “I want to work on this issue“ and then got assigned by the maintainer.

Now let me share how I contributed and what my contributions were.

FreeCodeCamp

The first issue I got assigned to was of FreeCodeCamp. The issue was to create a quiz on functional programming in a specified format. I created the quiz and sent the pull request.

I was asked for some modifications from the maintainers. After all the modifications my PR got merged. This happiness of getting your PR merged hits differently.

Contributing to FreeCodeCamp was really a big thing for me.

Here is my PR: https://github.com/freeCodeCamp/freeCodeCamp/pull/56497

The most important thing I learned from here was that before contributing to any project make sure that you have read the contributing guidelines. Also, be patient as this thing takes time.

ToolJet

The second was an issue in ToolJet which was a documentation fix. As soon as I was assigned I did the changes and made a PR. The maintainers suggested some changes. I made the changes and finally, my PR got approved and merged.

Here is my PR: https://github.com/ToolJet/ToolJet/pull/10943

Completing 2 of them gave me the boost to complete Hacktoberfest 2024.

Then I proceeded to find the third issue.

Makaut Buddy

I found the 3rd issue here where I needed to align the profile icon on the home page. It was a UI fix. I made the changes and my PR got approved.

Here is my PR: https://github.com/Arindam200/makaut_buddy/pull/166

And now comes the last one.

My 4th PR didn’t follow this standard process of getting assigned and then contributing. In this case, while I was exploring the project Makaut Buddy, I found some inconsistencies in the UI.

I thought of opening an issue as this project was actively participating in Hacktoberfest 2024. I opened the issue and also got assigned to it for work along with the #hacktoberfest label on the issue.

That gave me the final relief. I made all the changes and my PR got merged.

Here is my PR: https://github.com/Arindam200/makaut_buddy/pull/174

All my PRs were reviewed by the Hacktoberfest organization and were finally accepted.

In this way, I completed my Hacktoberfest 2024.

Lessons I learnt

Now here’s the summary of the lessons I learnt from my whole Hacktoberfest experience.

Before contributing to any project make sure that you have read the contributing guidelines.
Make sure you start working on the issue after getting assigned.(This is followed in most of the repositories).
Be patient while working on any issue and be collaborative.

Wrapping up

This was all about my Hacktoberfest experience and learnings.

If you found this blog useful and insightful, share it and comment down your views on it.

Do follow me for more such content.

Olibhia GhoshFollow

An open-source enthusiast. Currently learning web development and DSA in JAVA Have knowledge about Python and MySQL

Here's how you can connect with me.

Email - olibhia0712@gmail.com

Socials: Twitter , LinkedIn and GitHub

Thanks for giving it a read !!

Create a Slack Bot with NodeJS and Slack Bolt API

Olibhia Ghosh — Wed, 16 Oct 2024 10:45:57 +0000

Introduction

For developers, creating something using API that will automate our boring tasks is always a matter of excitement. And using Slack Bolt API we can make a bot for such boring tasks in Slack.

In this article, we will make a Slack Bot using Slack Bolt API and NodeJS and will also add some functionalities.

Excited right?

Me too :)

So let’s dive into it!

What is Slack?

Slack is a popular communication platform used by many organizations, businesses, and development teams.

If you explore Slack, you will see that it has Slack Bot which helps to streamline workflows and enhance team collaboration through automated processes.

Now let’s answer the most common question: What are the prerequisites for making a Slack Bot?

Prerequisites

NodeJS and NPM installed on your machine.

For reference, you can check my blog: All About NPM.
A basic understanding of JavaScript and NodeJS.

With these, you are all set to go for this project!

Project Setup

Here we will be discussing the steps to install a bot app in a Slack workspace.

At first, we will create a new workspace and then we will create a new Slack app for this workspace.

Create a new Slack workspace

We will go through the following steps to create a new Slack workspace

Visit the Slack website.
Click on Create a new workspace.
Now enter your email address.
Follow all the instructions and steps to create a workspace.
You can now create channels, and invite team members in your newly created workspace. You can also send direct messages.

I have created this workspace named Personal_Server for which I will create the Slack bot.

Note: You can also go with any existing workspace without creating a new workspace

Create a new Slack app

We will be following the following steps to create a new Slack app i.e. our Slack bot

Go to the Slack API website.
Now, click on Your Apps.
Next click on Create New App.
Click on From Scratch.

Now give the app name, pick up the workspace you recently created, and then click on Create App.

Note: You can also select any existing workspace without creating a new workspace

Now you will be redirected to the App credentials page.

You need to set permissions before your app starts communicating with your Slack. For this, go to the OAuth and Permissions page and scroll down to the scopes part.

Now, add the following scopes.

Okay! Want to avoid a future bug? Then also enable the chat:write scope.

In the left sidebar, Go to Settings → Install apps → Install to workspace.

You will get the Bot User OAuth Token!

For now, let’s leave this Slack API page and now let’s do our server setup with NodeJS.

Slackbot Server Setup

We need to configure a server for Slackbot that can handle requests sent to Slackbot. So now it’s coding time!

Create a directory with the name SLACK-BOT and initiate the npm:

mkdir SLACK-BOT 
cd SLACK-BOT
npm init -y

Note: -y answers all the questions of setting up by itself.

Now we need to install the following packages:

slack/bolt - Used to connect Slack to the Server.
dotenv - Used to store API Keys and Database Passwords.
nodemon - It is used to run the server.

To install these packages run the following command

npm i @slack/bolt dotenv nodemon

Now, nodemon helps you prevent restarting the server whenever you make any changes. It restarts the server automatically on changes.

Write the following command for nodemon setup in your package.json file.

Create an app.js file under the root directory which will serve as the main starting point of our project.

Authentication of the Bot with Tokens

Now comes the Authentication part. Before communicating with the bot, Slack first needs to verify your bot with SIGNING_SECRET and a BOT_TOKEN.

Both are stored in .env file so that they are not exposed on GitHub.

Now how to get the SIGNING_SECRET and a BOT_TOKEN?

SIGNING_SECRET → Go to the basic information page and there you will get the signing secret.

BOT_TOKEN → Go to the OAuth and Permissions page and there you will get the OAuth token.

Now, create a .env file under the root directory where you will store the Signing secret and OAuth token which will not be published on GitHub.

SIGNING_SECRET="YOUR SIGNING SECRET"
BOT_TOKEN="YOUR BOT TOKEN"

Server Setup

Now, write the following code in app.js file.

const { App } = require("@slack/bolt");
require("dotenv").config();
//Initializing the app with tokens
const app = new App({
  token: process.env.BOT_TOKEN,
  signingSecret: process.env.SIGNING_SECRET,
});
(async () => {
  const port = 3000;
  await app.start(process.env.PORT || port);
  console.log("Bolt app started!!");
})();

Now, run the command npm run dev and you will get the following message in the terminal.

This indicates everything is on point till now!

Now, the biggest question is How will the server and Slackbot communicate?

Let’s dive into that.

How will the server and Slackbot communicate?

Slack has a feature called socket mode that allows Slack to use the WebSockets to connect to your application server.

Go to Settings → Basic Info → App Level Tokens.
Click the Generate Tokens and Scopes button.
Give your token a name and allot your app two available scopes:

connections:write
authorizations:read

Click the Generate button. Then copy the APP_TOKEN from the next page and put it in .env file.

Now, the .env file looks like this

SIGNING_SECRET="YOUR SIGNING SECRET"
BOT_TOKEN="YOUR BOT TOKEN"
APP_TOKEN="YOUR APP TOKEN"

Next Go to Settings → Socket Mode and enable the “Enable Socket Mode” switch.

After that update the app configuration in the app.js file with socketMode:true and your appToken.

The app.js file will now look like:

 const { App } = require("@slack/bolt");
require("dotenv").config();
const app = new App({
  token: process.env.BOT_TOKEN,
  signingSecret: process.env.SIGNING_SECRET,
  socketMode: true,
  appToken: process.env.APP_TOKEN,
});
(async () => {
  const port = 3000;
  await app.start(process.env.PORT || port);
  console.log("Bolt app started!!");
})();

On running the file, you will see something like this on your terminal.

Adding Functionality

The setup is more or less done. Now it’s the time to add the functionality and make our Slackbot work in real.

Excited?

So let’s do it together!

Replying to a Message:

In Slack, you can send messages to the bot by mentioning the bot using @Bot_name (for me it’s Personal_Bot).

In Slack, app mentions are an event. You can also listen to other events like when a new user joins a channel, a new channel is created, etc. To allow your bot to listen to events, you need to set up an event subscription.

Click the subscribe to bot events dropdown menu and add the following events.

And then click on Save Changes located at the end of the page.

If it asks to reinstall the app, then do reinstall it.

Now we will write code to see if the app responds correctly to a message that it receives.

Add the following code to the app.js.

app.message("hello", async ({ message, say }) => {
    try {
      say(`Hello <@${message.user}>!`);
    } catch (error) {
        console.log("err")
      console.error(error);
    }
});

According to the above code, app.message is used to define that the app will respond with a “Hello @ username “ to a “hello“ message if sent.

But there’s still a problem. You will see the message like “You can’t send message to this app” when you click on the bot in the Apps tab of Slack. To resolve this, turn the feature on!

Now go back to the App settings page.

Then go to App Home under features. Now scroll down to Show Tabs section. Scroll down and check the box with allow users to send slash commands and messages from the Messages tab.

Now, reload Slack using the ctrl + r command.

Try sending a message like @ Personal_Bot hello and you will see it will respond with Hello @Olibhia Ghosh.

Taking a real situation the message cannot be exactly the same as we provide. For that, Slack allows us to use regex expressions where the bot can respond to a message that contains a keyword or some part of it.

app.message(/hi/, async ({ message , say }) => {
    try {
      say(`Hello <@${message.user}>!`);
    } catch (error) {
        console.log("err")
      console.error(error);
    }
});

If you send any message like hi personal bot, the bot will respond as it contains the word hi in it.

This was all about how I built my Slack Bot. You can add more features by referring to the Slack Bolt API Documentation.

Here’s the link to the source code of the Slack Bot I made : GitHub Repository.

Conclusion

I hope you’ve built your first Slack Bot by following this step-by-step guide. Now keep on exploring the API and adding more functionalities to your chatbot to enhance its functionalities.

I hope I made it simple for all.

If you found this blog useful and insightful, share it and comment down your views on it.

Do follow for more such content.

Here's how you can connect with me.

Email - olibhia0712@gmail.com

Socials: Twitter , LinkedIn and GitHub

Thanks for giving it a read !!

Improving Developer Productivity With Pieces

Olibhia Ghosh — Sun, 09 Jun 2024 17:32:56 +0000

Introduction

Hello everyone! Recently, I got introduced to a developer tool from a Twitter space where I got to know about its superb features and thus decided to use it. Today I'll be sharing that and yeah, you guessed it right it's Pieces for Developers.

I was working on a project named Makaut Buddy and that's where I tried Pieces that gave my productivity a 10x boost. It saved my time and gave me a smooth workflow. Also, Keeping track of my work became very easy with Pieces.

In this blog, I will be sharing how it helped me and how it can help you and increase your productivity.

Now the obvious questions that might come to your mind are What is Pieces? Why Pieces? How has it helped me? and How can it help you too?

So, let's answer it in the following section.

What is Pieces for Developers?

Pieces is an AI-enabled productivity tool that helps to boost a developer's productivity. It's your AI companion.

To have a better idea about What Pieces do, check out this video.

youtube.com

Why Pieces?

Now let's jump to the next question, "Why Pieces?" and also the obvious one "Why am I even suggesting this?".

Previously while working on projects I used ChatGPT or Gemini as an AI tool. But the problems I faced with that were the continuous switching between the tabs, not able to manage the code snippets in one place, and the copy-pasting code from IDE like VS code to the ChatGPT. It was really a headache for me.

That's when I decided to try out Pieces and after using it for a few weeks I realized how it increased my productivity, solved all my above problems, and provided me with a smooth workflow.

Thus I thought of sharing it with you all.

How can it help you?

Now let me give you an overview of my experience on how Pieces can help you along with the Use cases and pros/Cons with detailed notes on how it helped me in further sections of this blog.

Let's start with some of its Use cases

It helps in generating code from simple language instructions, searching for any code with context, generating code from screenshots, and many more.
It can access your entire PC, including recent web searches, files, folders, and open tabs for a broader understanding of your work.
Managing code snippet: Organizing, Saving, Editing, and sharing code snippets in a much easier way.
You can use live context to read the contents in an open tab when a huge number of tabs are open and thus you need not look for the tab among those huge number of tabs. (It works only when the live context is on and also the workstream pattern engine is enabled).
Live context also keeps a track of everything that you’ve focused on while WPE is running. And the amazing part is even if you close it you will still be able to access the information via Live Context.

Also, here are some of the pros/cons I discovered while using Pieces.

Pros:

It can access your entire PC, including recent web searches, files, folders, and open tabs for a broader understanding of your work.
It helps you to manage code snippets in an easier way.
Tailors suggestions to your project's codebase and language.
Can be run offline.
It picks up the context from where you left off, thus potentially saving your time.
It provides the workflow activity.
It enhances privacy and security by saving all the stuff in your local system.
It also improves the code quality by providing additional links and information.
You can also use Local LLMs through Pieces.

Cons:

Functionality is a bit slow in case of taking context from any files or folders.
It would be better if we also have a cloud version with a request limit so that everyone need not to have Pieces OS on their system.
Sometimes it throws an error while generating a response.

This was all about my discoveries on how Pieces can help you. Now let me share where Pieces actually helped me and how I used it.

How Pieces helped me?

I generally use Pieces while working on my projects and writing blogs.

In the following section, I'll be sharing how I used different features of Pieces and how they helped me

Let's start with my favourite one, the VS Code Extension

Visual Studio Code Plugin

When I was working on my project on VS code I had a problem in understanding a part of the code. Thus I decided to use the Pieces VS code extension.

I selected the code and asked to explain it to me. It explained the whole code and thus saved my time and solved my problem.

Here's the screenshot of what I did.

The best part about the VS code extension is that it has access to the VS Code workspace, thus you can ask any question related to any file or folder provided as context by giving the file name or its relative path and it also saves code snippets with a title as well as a description.

But one thing that I didn't like was while I accessed the saved snippets from any particular project folder in VS code it showed me all the saved snippets from various folders. It would be better if it can show that for that particular folder only.

That was all about my thoughts while exploring this feature.

Now, let's jump into that feature which I found the most helpful, the Desktop app.

Desktop App

My college gave me a screenshot of a code that I need to run on my machine. Thus instead of writing the code manually, I decided to use Pieces.

I used the screenshot to code generator feature in Pieces copilot that extracted the code from the screenshot thus simplifying my work. I just copied the code and ran it on my machine.

I explored the desktop app more as it caught my attention. I found several use cases that are super helpful which are listed below.

You can use files and folders as context for asking any question about a code. Thus you don’t have to copy-paste the huge lines of codes and ask for any answer.
You can also save code snippets that you can further refer to in a single place i.e. from the Desktop App.
The best feature I liked is the Screenshot to code converter as I mentioned earlier.
You can use GPT4o and that’s really awesome. You can also switch between various LLMs.
Pieces Desktop App can access your entire PC, including recent web searches, files, folders, and open tabs for a broader understanding of your work.
It also picks up context from where you left off, potentially saving time.
Pieces helps you to share code snippets using shareable links attached with context, important info as well as links.

And these were the awesome features the desktop app provides.

Here I didn’t find any such type of cons except the late response by the Live context feature. It takes a lot of time to grab the context and then provide the answer.

And this was all about it. Now let's look into the most fascinating feature I found, the Live Context.

Live Context

I was looking for my tweet where I celebrated my followers and thus instead of searching the Twitter tab where the post was open among the huge number of tabs previously opened by me, I decided to use Live context (My live context was already on and the workstream pattern engine was also enabled).

It read me the post with the keyword followers which helped me to avoid the manual search and this was really fascinating.

It help you to deal with switching between tabs frequently. Using it you can get information of any tab that is open without scrolling and finding the tabs among the numerous opened tabs.

Moreover, when I was working on one of the projects on VS code and couldn’t understand it, I thought of referring to the Live context. (Of course my live context and WPE was enabled).

I asked it to explain me the code opened on my VS code and it did that for me. This saved me from copying the code and then asking the copilot. Isn’t it amazing?

Here’s a screenshot of what I did.

And you know what, the best part is it stores all the contexts and data on your device locally thus making it more secure for you.

But Sometimes it does not give the desired result. It is taking some extra time to capture the context thus getting the response late or getting the earlier response.

That was all about Live context.

And while I was exploring all this I got to know about the web extension and now let me share that with you too.

Web Extension

While browsing I come across a lot of code on various websites and thus while working with these codes I need to switch between my tabs very often which was really a headache for me.

The Pieces web extension gave me an option to save all the snippets in a place so that I could refer to them from a single place. This helped me as I need not switch between the tabs frequently anymore. It saved all the snippets in Pieces desktop app.

It also discovers all the possible snippets and suggests to save if required. This reduces your load as it already discovered all the code snippets from the website.

It also gives you access to the copilot chat with the help of which you can ask questions without leaving the browser.

And that was all about all the features and how these helped me.

Setting Up

After knowing all the amazing features it provides all that remains to know is how to set it up and use it. For more information on how to set up on your local system check the link below.

Check out this link for Set Up

Conclusion

In my opinion, Pieces Suite is a pack of powerful tools that adds to developers' productivity, enriched learning, Code snippet management, and various others. Its Web extension, VS code extension, and live context make it superbly easy to keep track of work and maintain a consistent workflow.

In a nutshell, it’s a great developer tool that can increase one's productivity by 10x times.

If you found this blog useful and insightful, share it and comment down your views on it. Do follow for more such content. Also, connect with me on :

Email: olibhia0712@gmail.com

Socials: Twitter, LinkedIn and GitHub

Thanks for giving it a read !!

All About NPM (Node Package Manager)

Olibhia Ghosh — Sat, 25 May 2024 06:11:57 +0000

Introduction

NPM is an essential tool for JavaScript developers for managing versatile packages in the node.js ecosystem.

While I was learning Tailwind CSS and Node.js, I came across this term "NPM" and this made me pretty curious.

So I decided to dive deep into the concept usage and working of NPM

In this article, we will explore the basic concept of NPM

So, let's dive into it.

What is NPM?

So before we move further let's understand What is NPM.

NPM stands for Node Package Manager. It is the main and default package manager for the JavaScript runtime environment Node.js

Not clear enough?

Let's break it into much simpler words

It is a huge repository containing numerous open-source software that can be used by anyone for free.

Why do we need NPM?

Now the question that arises in our mind is why do we actually need npm?

Let's understand this using an example. Assume that we are building a laptop. Is it possible to build all its components from scratch and then assemble all the components to build a laptop?

No right?

As it will take a lot of time and is also not worth it. Instead, we just take the pre-built components and assemble them to make a laptop which makes the process much easier and faster

NPM helps us in a similar way. It makes writing code easier as we can use pre-built code written by other authors

Other authors write their code for their package and publish it on the NPM registry. We can then use the code by installing it on our machine using NPM CLI(Command Line Interface). All kinds of packages are present in NPM from single-purpose ones to large libraries.

Now to use NPM we need to know how to install NPM on our machines.

Let's look into that

Installing Node.js

Step 1: Go to the website https://nodejs.org/en/download

Select the required version, the OS, and click on download.

Now download it and complete the setup.

Tip: Avoid choosing the latest version as it might contain bugs

Step 2: Run the following commands on your terminal and check if Node.js was installed.

The command node -v and npm -v will return its latest versions.

If it's not working then try restarting your system and it will work.

Now let's look into the process of installing npm packages

Installing NPM Packages

In this step, we will install the required NPM package.

For that first clone any repository and open it in your code editor

Now open the terminal and run the following command

npm init -y

Note: Here -y is used to automatically answer "yes" to all prompts. Thus preventing us from doing it manually.

You will see a package.json file was created.

We will be looking into the usage and details of this file further

In a nutshell, package.json file contains the details about the dependencies and packages to be installed on running the required npm command

On running the command npm install it will create a node_modules folder and install the required packages and dependencies as mentioned in the package.json file inside the node_modules folder

It will also create a package-lock.json file. In the further sections, we will be looking into the details of the package-lock.json file.

We can also use the following command to only install the specified and required packages and their dependencies in the node_modules

After installation, it will automatically get pushed into the package.json file

npm install <package name>

What we have been doing till now is installing local packages but there is also something termed global packages that can be installed and used

Now we will see the difference between local packages and global packages

Local Package v/s Global Package

Let's understand the difference between the local package and the global package.

Local packages: These packages are installed in the directory where we run the npm install <package name> command. These packages are not available for other projects or other directories.

Global packages: These are installed in our system in a specified location and can be used in any directory or any project present in the System.

We can install these global packages using the command

npm install -g <package-name>

And, we are ready to use the installed packages and work with them.

Now, we will be looking into the use and details of the "package.json" file and "package-lock.json" file.

About Package.json File

It is important to know the uses and details of these files. So, let's learn about the package.json file.

Package.json file stores all the data about the project.

It contains :

name -> name of the project
version -> The current version of the project
description -> The description of the project
main -> Specifies the file that is the main entry point of your project
scripts -> This includes the command associated with your project like the command for building, running, or testing the project
dependencies -> This is where all the required packages are listed that are required to run the project. These are installed in your system using npm install
devDependencies -> This contains the modules that are required only during the development not in the production
repository -> Specifies the type of version control we are using and the url of the repository
keywords -> These are the array of strings that contain the keywords of the projects that help people discover the project
author -> The name of the author of the project
license -> the license type of the project

A sample package.json looks like this

About Package-lock.json File

Now when you are installing the packages you may have noticed that it also creates a package-lock.json file.

This file contains the records of actual specific versions of each package and dependencies installed on your local system

This file helps us to install the exact version of the packages and dependencies despite any update in version in between the phase when the file was created and when it was installed locally.

This is the main function that this file performs

Apart from this, It speeds up the installation process -> without the package-lock.json file before installing npm has to request the registry for each package to see if there are new versions available.

With package-lock.json npm knows the exact version to install and thus it speeds up the installation process

These were the basic usage of the package.json file and the package-lock.json file

Conclusion

This was all we needed to know about NPM Packages to have a basic clear understanding.

I hope I made it simple for all.

If you found this blog useful and insightful, share it and comment down your views on it.

Do follow for more such content.

Here's how you can connect with me.

Email - olibhia0712@gmail.com

Socials: Twitter , LinkedIn and GitHub

Thanks for giving it a read !!

How To Make A Background Color Switcher Project Using JavaScript?

Olibhia Ghosh — Sun, 28 Apr 2024 11:09:44 +0000

Introduction

For the last few months, I have been learning HTML, Tailwind CSS, and JavaScript.

So, I thought of building a project with these to improve my DOM manipulation concepts

In this article, I will be sharing how I made a Background Color Switcher Project

Let's dive into it !!

Prerequisites

The Tech Stack I used for building this project is :

HTML
Tailwind CSS
JavaScript (Specifically DOM Manipulation)

Project Overview

So, Let's see what is this project all about.

A Background Color Switcher

This project is a background color switcher in which there are multiple color options available (refer to the above image). Here if u click on any of the colors it will get applied to the background.

I did this using the basic concepts of DOM Manipulation in JavaScript.

Now let's start building the project together.

The project will be done in 3 steps :

Setting up HTML Structure
Styling it with Tailwind CSS
Adding functionalities using JavaScript

Now let's understand each of the steps in details.

Setting Up the HTML Structure

At first, we will be setting up the HTML Structure, and for that, we will be creating two <div>s, One containing the text "Select The Color You Want To Apply To The Background" and the other containing multiple color boxes.

In the second <div> we will create four other <div>s that are the color boxes with the respective color class as their ids.

Here's have a look at it

<body>
    <div>Select The Color You Want To Apply To The Background</div>
    <div> 
        <div></div> <!-- Extra div -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

You must be wondering why we have added the extra <div> under the second main <div> (check the above code)

We will be looking into this in the following sections.

So, that was all about creating the HTML structure.

Now let's add styles to this HTML Page using Tailwind CSS.

Styling with Tailwind CSS

Now we will add basic styling to our HTML Page

We will start with adding font style, font weight, and basic padding to the heading.

<div class="font-bold text-2xl text-center pt-20 pb-8 sm:pt-28 sm:text-3xl xl:text-4xl xl:pt-48">
Select The Color You Want To Apply To The Background</div>

Then we will add the required border, background color, width, and height to the color containers.

We will also add an id to all the color containers and in this example we have kept it the same as its color class

 <div class="flex flex-col space-y-5 justify-center items-center pb-10 md:flex-row md:space-x-8 xl:space-x-12">
        <div></div> <!-- Extra div -->
        <div class="border-black border-2 w-48 h-48 bg-red-600 button" id="bg-red-600"></div>
        <div class="border-black border-2 w-48 h-48 bg-blue-700 button" id="bg-blue-700"></div>
        <div class="border-black border-2 w-48 h-48 bg-yellow-500 button" id="bg-yellow-500"></div>
        <div class="border-black border-2 w-48 h-48 bg-white button" id="bg-white"></div>
    </div>

Now let's get into the use of the extra div (Check the above code)

We have used the extra div to align the color containers at the same level so that the space-y-5 or space-x-8 property works properly as this property is applied only in between the elements not at the starting.

Adding Functionality with JavaScript

We all know that functionality can be added to the project using a script tag (which contains the JS code) within the body tag.

Now let's add the required functionality step by step.

Firstly we will select the color containers using their class="button" and the body element on which the color is going to be added using query selectors.

 buttons = document.querySelectorAll(".button");
 body = document.querySelector("body");

We need to run a loop on the buttons thus fetching one color container at a time.

Now we will add an event listener on the selected color container that will specify its work upon clicking on it.

buttons.forEach(function(button){
        button.addEventListener("click" , function(e){
        //Code to be executed on clicking
        })

Now let's define the function(e) which contains the main code to be executed on clicking on the color container.

Inside the function, at first, we call a function named removebg

It will take the body element as the argument and will remove any existing bg-color class from the class list of the body element

We did it so that on clicking on a new color container new class can be added to the class list thus giving the body a new background color every time

We will be defining this removebg function further.

After calling the removebg function any existing bg-color class will get removed from the class list.

Then we will add the required color class (which is present in each element's id) in the body element's class list.

buttons.forEach(function(button){
        //console.log(button);
        button.addEventListener("click" , function(e){
            removebg(body); // remove bg color from target element
            body.classList.add(e.target.id);   //Add the required bg colour
        })

Now the last part that remains is to define the removebg function.

This function will accept the body element as a parameter which is stored in the variable sourceElement.

Next, we will define a variable sourceClasses that makes an array out of the classes present in the sourceElement.

After that, we will run a loop on the array sourceClasses selecting each class, checking whether the class name starts with "bg-" and if that matches then we will remove it.

 const removebg = (sourceElement) => {
       let sourceClasses = Array.from(sourceElement.classList);
       sourceClasses.forEach(function(className) {
            if (className.startsWith('bg-')) { // check if class has any background color class
                  body.classList.remove(className); // remove bg color from target element
            }
       });
}

And with that, we have successfully built a background color switcher.

The link to the GitHub repository containing the whole code and the project website link is attached at the end for your reference.

Testing the Project

After the code completion, I ran it locally using the npm package and then also deployed the project using Vercel.

Here's a preview of my project:

https://olibhia-bg-color-switcher.vercel.app/

Here's the GitHub Repository containing the whole code:

[https://github.com/OlibhiaGhosh/Web_Dev_Project1.0]

Conclusion

That was all about the code of this project.

I hope I made it simple for all.

If you found this blog useful and insightful, share it and comment down your views on it.

Do follow for more such content.

Here's how you can connect with me.

Email - olibhia0712@gmail.com

Socials: <Twitter>
<LinkedIn>
<GitHub>

Thanks for giving it a read !!

All about JavaScript Execution Context

Olibhia Ghosh — Tue, 12 Mar 2024 09:22:27 +0000

Introduction

JavaScript is a single-threaded, popular, and commonly used programming language. So, besides coding in JavaScript, we should know how the code runs internally. In this article, we will be looking through the steps and understand the internal code execution in JavaScript.

So, let's dive into it!!

What is Execution Context?

Execution context is a fundamental topic in JavaScript which refers to the scope or environment in which the JavaScript code is evaluated and executed.

Whenever any code runs in JavaScript it runs inside the execution context.

Its Importance

Understanding the execution context is important as it helps us to understand the variable accessibility(i.e. the scope of the variables in the code), the value of 'this' keyword which is often misunderstood, and the concept of Hoisting.

Types of execution context

There are three types of execution context

Global Execution Context
Function Execution Context
Eval Function Execution Context

Now let's dive into the main content and look into the creation of execution context.

Creation of Execution Context

When a code is run in JavaScript, at first a global execution context is created. The global execution context is allocated to 'this' variable.

After that, the creation of the execution context consists of two phases: The Creation phase and the Code Execution Phase. The JS code runs in two phases

Not clear enough?

Let's understand these phases and the whole process of code execution through an example and diagrams.

Let's have a look at a simple code

let num1 = 50;
let num2 = 100;
function product(val1 , val2){
    let ans= val1*val2;
    return ans;
}
let result= product(num1 , num2);

While running the code, at first a global execution context is created which is referred to this variable.

In the browser, the value of this is the "window" object. All the further execution contexts are created inside this Global execution context.

As JavaScript is a single-threaded language, everything inside it works in a definite process.

Now after the creation of the Global execution context, the code execution takes place.

In JS, the code execution takes place in two steps, the first is the memory creation phase in which the variables are declared and allocated memory. The second one is the code execution phase in which the variables are assigned their value and the code is run line by line.

Memory Creation Phase

In this phase, declaration and memory allocation of variables take place within the execution context but are not initialized or assigned any value.

In the above example, in the memory creation phase at first variables num1 and then num2 are declared which is initialized with the value undefined. After that, the function product is declared which contains the function definition, and lastly, the variable result is declared which contains the value undefined.

Here comes the concept of "Hoisting".

Hoisting is a JS mechanism where variables and function declarations are moved to the top of their containing scope in the compilation phase even before the execution of the code. Thus these variables are hoisted to the top of their scopes.

Now let's look into the next phase i.e. the Execution phase.

Execution Phase

After the variables are declared, the first half of execution is completed. Now here starts the code execution phase. In the execution phase all the declared variables are initialized with the values and the code is executed line by line.

In the above example, during the execution phase at first num1 is initialized with the value i.e. 50, and similarly, num2 is initialized with 100.

Following that the function product is called and for that function, a new function execution context is created consisting of a new variable environment and execution thread

(Refer to the following image for better understanding).

The function is also executed similarly in two phases inside the function execution context until it returns the value to the Global execution context.

Function Execution Context: In the memory creation phase val1, val2and ans are declared consecutively and are initialized with undefined. After that in the execution phase val1 is initialized with the value 50 as val1= num1. Similarly val2= 100 as val2=num2. In the next step, ans is evaluated as ans= val1*val2 and assigned with the value 5000.

After it returns the value to the global execution context, the function execution context is deleted.

In the next step the returned value by the function is assigned to the result variable and the output is given. Now the execution of the code is completed. After completion, the whole execution context is destroyed.

There is also a concept called Call Stack. It is a mechanism that keeps track of the functions being called, which are being executed, and which are in queue to be executed one after another.

It follows the LIFO principle (i.e. Last In First Out principle). The function called at the last is added to the top of the list and after its execution, it is popped out.

Conclusion

That was all about how code is executed in JavaScript.

I hope I was able to clear the process of code execution more simply.

If you found this blog useful and insightful, share it and comment down your views on it. Do follow for more such content.

Here's how you can connect with me.

Email - olibhiag@gmail.com

Socials: <Twitter><LinkedIn><GitHub>

Thanks for giving it a read !!

The Importance Of Documentation

Olibhia Ghosh — Wed, 06 Mar 2024 20:46:15 +0000

Introduction

These days nobody prefers any project or code that is not well-documented. In a project, documentation increases readability, guides the user to get a clear idea about the project, and also helps a developer to understand it well and work on it. So, here I am with the key points and tips for writing documentation.

Let's dive into it !!

What happens when you come across a project without proper documentation?

Suppose, You're a new developer on a large project, and you dived into it with full enthusiasm and excitement to find yourself surrounded by complex functions, and big lines of code that you need to analyze as a whole to understand and work on.

This is the problem that we, developers face when we get a project without proper documentation. And that's where documentation plays a crucial role in making it more accessible to the users.

In the next section let's explore how documentation helps us.

Why Documentation is Your Coding BFF?

Here are some points on how documentation helps us.

Increased productivity: Clear Documentation helps to understand a project easily. Thus investing minimal time in understanding and analyzing it saves time and energy
Improved collaboration: Proper documentation helps in better communication within your team. It keeps everyone on the same page making the project workflow smoother.
Easier maintenance and updates: When we understand the code, fixing bugs and adding features becomes easy. Documentation acts as a roadmap, guiding us through every part of the project. And thus it makes it easy for the maintainer to maintain the code.
Reusable code: Well-documented code is easier to reuse, which saves our time and effort.

Now you have an idea of why documentation is crucial for any project. But here comes the real question, how do you make your documentation more interactive, user-friendly, and useful?

Let's look at some of the tips for making documentation.

Tips for Top-Notch Documentation

Here are some of the tips for writing interactive and useful documentation.

Start early and stay consistent: Don't wait until the code's finished to document it. Document the code throughout the whole process of writing the code and be consistent in that.
Write for your audience: Consider who will be reading the documentation. Are they coders or newbies? Modify your language and explanations accordingly. Your documentation should be user-oriented.
Structuring the documentation: Use headings, subheadings, and bullet points to break down information into digestible chunks. Nobody likes a wall of text, not even programmers.
Adding all actions: Add all the commands your product uses in your documentation.
Adding some important elements: It always serves as +1 if you add a table of contents, terminologies associated with your project, installation process, and tutorials.
Adding a search button makes it more customizable.
Adding Examples: Illustrate your explanations with code snippets and diagrams. A picture (or code) is truly worth a thousand words. This also makes your documentation interactive.
Keep it concise and clear: Avoid overly technical terms. It should be easy enough to understand by users, developers, or programmers.

Here have a look at one of my tweets on documentation:

// Detect dark theme var iframe = document.getElementById('tweet-1744577238945890304-229'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1744577238945890304&theme=dark" } .

Now here after following the tips we are ready with presentable documentation. Finally to give an ultra edge to the documentation here are some of the key points.

Key Points to Keep in Mind:

Focus on the "why" as much as the "what." Explain the purpose and reasoning behind your code.
There are plenty of documentation tools available, from simple Markdown editors to API generators. Find one that fits your workflow and use it.
Be clear about the user goals and learning objectives (intellectual goals). To achieve user goals you must take care of some learning objectives.
Write your docs as code as editing code is easier.
Most importantly, have fun! Inject your personality and passion into your words, and you might create documentation that people enjoy reading.

Conclusion

Remember, to keep your documentation updated because that is the entry point of your project.

Also don't forget to add pictures, GIFs, or even fun facts to your documentation. A little visual flair can go a long way in keeping your readers engaged.

If you found this blog useful and insightful, do consider sharing this blog and comment down your views on it. Do follow for more such content.

Here's how you can connect with me.

Email - olibhiag@gmail.com

Socials: <Twitter><LinkedIn><GitHub>

Thanks for giving it a read !!

Wish you a happy journey for your coding and documenting.

My First 3 Months In Tech

Olibhia Ghosh — Mon, 04 Mar 2024 16:27:58 +0000

Introduction

Just a few months ago i.e. in the mid of September, I got into the University to pursue my BTech degree in Computer Science and Engineering. Soon I got introduced to the Tech world and started my Tech journey in October. Previously I had basic knowledge of Python and a proper knowledge of MySQL.

So here I am to share my journey and experience with you all with the hope that it might help others too. So let's dive into it !!

The Tech Journey

October, 2023

Week 1

Seniors in our college started taking tech sessions to help us grow and with their help, I started learning GitHub. Also started with C language. Grateful to our seniors(@arindam_1729 ) and (@swapnoneel123 ) for giving the much-needed guidance and that ultra edge in this tech world through their sessions.

Week 2

Continued exploring Github. Also started with web development following the Sigma Web Development Course, a free course on YouTube by Code with Harry. I learned many things in this course like Basic HTML tags, inline and block elements, and HTML lists.

// Detect dark theme var iframe = document.getElementById('tweet-1714698623307706458-696'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1714698623307706458&theme=dark" } .

Week 3

Learned more topics in HTML like HTML tables, HTML Forms, HTML elements, and HTML Media. And yeah also contributed to a repository named Makaut Buddy on Git Hub.

Week 4

Finally, I completed the whole HTML part (covered miscellaneous tags in HTML) as it was easy to learn. And then proceeded to learn CSS. Nothing much was done as I needed to focus on academics for my CA exams.

November,2023

Week 1

Continued contributing to the repository on GitHub. Also got introduced to LeetCode in the sessions by our seniors. Also kept on learning CSS.

GitHub repository link: https://github.com/Arindam200/makaut_buddy

Week 2

This week I took the most crucial decision of leaving C language and shifted to JAVA. Yeah, I made the mistake of starting with C and soon after taking some advice I realized that it is far better to go with JAVA for DSA and I shifted to JAVA and started learning it. The resource I followed for learning JAVA is mentioned in the following tweet.

I got to learn many things in this JAVA course like Variables and Datatypes, Conditional, loops and Switch Statements, Functions(Methods), Scope, and Shadowing. Also solved 1 LeetCode problem in JAVA.

// Detect dark theme var iframe = document.getElementById('tweet-1724303423103975748-317'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1724303423103975748&theme=dark" } .

Week 3

Continued learning JAVA. Also made contributions to the GitHub repository makaut_buddy. This week I started a new project in collaboration with college batchmates.

Got to know about more topics in JAVA like Arrays and Array lists which include 1D arrays, multidimensional arrays, dynamic arrays, etc.

Yaa also solved 5 LeetCode problems in JAVA.

Week 4

Attended a JCON event. A huge thanks to my seniors who arranged the tickets for us. Continued learning in JAVA (learned binary search, solved leet code problems on arrays and linear search). Also learned CSS( Selectors, different properties, and elements).

Most importantly made my first Open Source Contribution(non-technical) under Keploy.

December,2023

Week 1

Started this month by practicing DSA on LeetCode on binary search. Got to learn about CSS box models. For the first time, I created a login page using HTML and the basics of CSS. Also learned how to deploy the projects.

// Detect dark theme var iframe = document.getElementById('tweet-1731691261336138205-840'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1731691261336138205&theme=dark" } .

Week 2

This week I continued learning Bubble sort, selection sort, and insertion sort in JAVA. Practiced questions on Binary search. Learned CSS(Fonts and colors, specificity and cascade, sizing units, Shadows and outlines, styling lists, overflow property, CSS positions). Had to focus on academics due to college CA exams.

Week 3

Continued learning CSS (Variables, media queries, float, clear, flexbox, Grid, Transform, Transition, Animation, Object fit and object cover, CSS filters ) and in DSA learned binary search in 2D Arrays.

Week 4

This week I learned the basics of Figma and how to use it. Also revised HTML and CSS through practical application. Also, made a sign-in and sign-up page, a part of a project in collaboration with college friends. Also worked on other small parts.

// Detect dark theme var iframe = document.getElementById('tweet-1739919189744488784-535'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1739919189744488784&theme=dark" } .

Conclusion

This was all about my journey till now. From being unaware of this technical world to being a part of it was a wonderful experience. But to be very honest my journey could have been more better if I hadn't invested so much time in HTML and learned the technologies at a greater pace. Concluding on an optimistic note, in the upcoming days, I plan to complete DSA in JAVA, learn full-stack web development, make more open-source contributions, explore various domains, and take forward the legacy started by our seniors of creating a technical community, and make our contributions towards this tech community.

If you found this blog useful and insightful, do consider sharing this blog and comment down your views on it. Do follow for more such content.

Here's how you can connect with me.

Email - olibhiag@gmail.com

Socials: <Twitter><LinkedIn><GitHub>

Thanks for giving it a read !!