DEV Community: Deveesh Shetty

Breaking down CSS positioning

Deveesh Shetty — Mon, 15 Sep 2025 18:32:54 +0000

Whomever i talk to about CSS, says they struggle with positions and how they actually work

Made a few illustrations to make it little less random when you use them for the next time.

By default all the elements in the page are position: static, it means they will follow the usual sequential approach of HTML page

But sometimes you need to position elements at a different place, or in a different manner. 99% of the times you can get away by using layout properties like flex or grid, but sometimes you need to take matter into your own hands and use position property

position: relative

This is the simplest of them all, when you add this to your css, for your surprise. it does nothing, absolutely nothing by itself

But this position value allows you to add properties like top, right, bottom, left and also z-index. This gives you more control on where to keep the element

position: absolute

This is little scarier than relative, and sometimes haunts me in my dreams, absolute positioning makes your element fly in the DOM. basically the element exits the sequential flow of the HTML document.

Absolute element will always be positioned relative to the nearest relative parent.

अर्थात् (meaning): If you position an element as absolute it will take the top, right, bottom, left (TRBL) properties based on the nearest parent which is set to position relative.

If no parent has position relative, it will fallback to the HTML root, ie the window. That's why you can see it is stuck on the top left of the page.

Notice it now it changes relative to the window

Now let's enclose it in a parent which has position relative, then it will be positioned with respect to the parents TRBL properties

Adding some TRBL properties to the absolute element

That's it, it ain't no rocket science. Mess around a little with it and you will be more confident in writing them

Also as a side note, try to avoid absolute positioning as much as you can, since it will create more problems then it might solve, ranging from pixel manipulation till responsiveness.

Originally posted on X

Deveesh Shetty
Github | X

Why should I cherry-pick?

Deveesh Shetty — Mon, 10 Feb 2025 20:56:25 +0000

Even I had this question, in my mind it was another feature that I would never use. But well I was wrong, I use it quite often.

Let's understand it with a real-case scenario.

Ever accidentally commited to a wrong branch, and wanted to revert?

Well, you could have done it the old fashion way of undoing the commit, changing branch and commiting again. But this will be a mess when you are down multiple commits.

But there is a better way to do it.

Step 1: Realise you commited in master instead of my-feature branch.

Step 2: Copy the hash of the commits you want in the other branch. Run this where you committed your changes, ie. master branch here.

Note: If you need multiple commits, either you can copy all the hashes, or if they are consecutive commits, you only need to copy the first mistaken commit hash and the last commit hash.

git log --oneline

Step 3: Switch to the my-feature branch

git checkout my-feature

Add -b flag if you are creating a new branch. Read more about branches here.

Step 4: If you have

(i) One commit

git cherry-pick <hash>

(ii) Multiple commits

git cherry-pick <hash1> <hash2> <hash3>

(iii) Consecutive range of commits

git cherry-pick <first-hash>..<last-hash>

Congratulation, you will have those commits in my-feature branch. 🎉

Step 5: (Optional) Delete commits from master branch.

git checkout master
git reset --hard HEAD~N

Where N is the number of commits, only do this when the commits are consecutive, and on tip of the branch. This works for our situation.

Or you can also use interactive rebase to drop specific commits

git rebase -i <commit-hash>

Bonus

You can use -n flag to apply changes without commiting in the new branch
Use -x file to retain reference of the original commit which was cherry-picked. It shows up like this

That's it. As simple as it is.

It has saved me a lot of time when I accidentally commit changes to the main branch or a wrong feature branch (yeah, I don't delete local branches after they are merged);

Git cherry-picking can also be used for, selecting specific features from a branch, reordering commits, and much more left to your creativity.

Thank you for reading through the blog, its been quite a while (11 months to be exact) since I wrote my last blog. Working on increasing the regularity of blog posts.

Deveesh Shetty
Twitter | GitHub

Credits:
Cover Image - Unsplash

Javascript History API

Deveesh Shetty — Sat, 30 Mar 2024 11:22:43 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

Want to mess with history?

Well, you can, at least in JavaScript. Check out the History API, to go front and back the browser page
history.forward() - for next page
history.back() - for previous page

You can try it in the browser console as well.

Additional Context

I recently found it while exploring Web APIs in MDN docs, it is quite handy if you are working with vanilla HTML, and want to go back and forth in browser sessions.

Full document - History API MDN

Thank you for reading!

Deveesh Shetty
Github | Twitter

CSS Art: Paneer Tikka

Deveesh Shetty — Sat, 30 Mar 2024 07:40:20 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

India is famous for its delicacies, for every 10 kilometers you travel, you will find a new food item that is famous in that area.

Being a South Indian, I like North Indian food, despite having a variety of dishes, one of my favorite starters is Paneer Tikka. This starter is made by adding paneer, onion, capsicum, and tomato to a stick and grilling it in a Tandoor

Demo

Journey

It has been a very long time since I used vanilla CSS, Tailwind CSS totally didn't spoil me XD.

Well jokes apart, I woke up with an email from Devto about this challenge, and in no time I started to think about my favorite dish that I could create.

It was a fun journey that took almost 3-4 hours to put this up, and the neat part it is 100% responsive. The first time I used the General Sibling Selector (~) in CSS, and also added a fun hover animation to eat the paneer tikka.

My step-by-step take on building this ✨

First, I created a plate that was quite simple, I used CSS pseudo-elements to give inner borders, and border-radius to have the croissant-type shape.
Then I proceeded to create a stick and centered it on the plate using a Flexbox.
Next comes the food item, I placed each item ie Paneer, Capsicum, etc. in a div with particular class names, and styled them accordingly using CSS colors, borders, and box-shadows.
All the items are child of the stick so it was easy to align them with a simple flex.
Next comes the sauce (literally), firstly I drew 2 circles and masked them with their pseudo-element to have a semi-circular pattern.
Created 2 extra divs and positioned them at the top right as sauce bowls.
Added some final box-shadow which gave some depth effect to the plate and bowls.
Still, something is missing, yes animation! So I added a small hover effect which on hover eats everything in the plate and leaves one capsicum XD

If you found it delicious you can find the recipe here - Paneer Tikka Recipe

Thank you for reading!

Deveesh Shetty
Github | Twitter

Finding Issues for Hacktoberfest

Deveesh Shetty — Mon, 02 Oct 2023 14:45:37 +0000

There are millions of open-source projects you can contribute in GitHub,

Checkout for the tags like,

🔖 good-first-issue: Which means the fix is beginner friendly

🔖 hacktoberfest: All the projects/issues accepted for hacktoberfest most of them are quite easy to work with

🔖 documentation: open-source is not only about code even documentation counts

If you are confused about an issue, you can ask about it in the issue comments, most maintainers are more than ready to help you.

Beyond console.log in JavaScript

Deveesh Shetty — Tue, 19 Sep 2023 12:09:57 +0000

You may have only used console.log() in JavaScript, but you can do many more things with the console object.

console.table()

If you have an object and want a clear view of it instead of having those ugly braces in the console you can use console.table()

const obj = {
  name: "John",
  age: 30,
  city: "New York",
  country: "USA",
}
console.table(obj)

console.error()

You will get a cool-looking (yeah 🙂) red color message for the instances where you want to make the stress on the bug more realistic.

console.error("Why is this rendering twice")

console.warn()

Similar to error but a little less stressful, you can mostly use this as a warning to yourself.

console.warn("Fix this in the next release!")

console.time()

You can get the computation time easily by using console.time(), which starts the timer, and console.timeEnd() which ends it to compute the time taken by your code.
You can pass a label inside the time() function which makes the timer unique, so you can have as many number of timers in your program.

console.time("Time")
let count = 0
for (let i = 0; i < 100000; i++) {
  count += 1
}
console.timeEnd("Time")

That's it for this blog... There are many more methods available, if you are interested you can check it out at MDN Docs.

Deveesh Shetty
Github | Twitter

Creating a Pull Request in GitHub

Deveesh Shetty — Thu, 07 Sep 2023 07:31:49 +0000

In this blog we will be seeing how to contribute to Open Source Projects by creating your very first Pull Request as a beginner, and trust me it is going to be very easy.

NOTE: I value your time so, if you want to skip to the fun part and avoid theory, click here.

Before getting started, if you don't know about Git commands, I have covered it in my blog post about Git and GitHub Basics

Introduction

To contribute to open-source projects you have to follow a certain steps, you can't directly push a commit to others' repository. For that you have to make the changes in your local (forked) repository then send a Pull Request which has the changes, which when accepted will reflect the changes to the original repository.

Didn't understand what I mean? Don't worry, because it was difficult for me too to understand it in the first glance. So let me break it down step by step which will help you understand it much better.

The cycle of contributing

Remote Repository: The repository (repo) to which you want to contribute to, which is owned and maintained by other person or organisation.

Fork: You are creating a copy of the remote repo to your own GitHub account, where you can do changes without affecting the original (remote) repo. Forked repo can also be called as Local repo.

Clone: You clone the content of the repo from the remote/local repo to your machine, where you can open it in your desired text-editor or IDE.

Push: You are updating (pushing) the changes made in your PC to the repo.

Pull: You are updating the code in your PC by importing (pulling) content from the repo.

Pull Request: The changes you made in the fork are limited to your account, to reflect it in the remote repository you send a Pull Request (PR) to request the author to pull the changes from your local repo to the remote repo. We will be talking about it in detail in upcoming sections.

When you want to contribute to a open-source project,

You first fork the repo to your account.
Then clone the forked repo onto your PC.
Open the cloned folder in your desired text-editor.
Create a branch and switch to it.
Do the needful changes and add those changes to staging area.
Once you are confident with the changes commit it with a good message.
Then push it to your local (forked) repo.
Once everything is all set, send a Pull Request using the "Compare and Pull Request" button, mention what are the changes and improvement your PR is doing and Create the PR.

Yes as simple as it is!!

Next, the maintainers of the open-source repo will review it, if they need any changes they will mention it in comments. If everything goes alright, they will merge the Pull Request. Which means your contribution is live in the remote repo. Congratulations 🥳!

That's all theory, the real fun is in hands-on let's dive into it and contribute to an actual repository on GitHub.
I will be using Commit-to-Success repo, which I created for my Git and GitHub session, here you can add a file about yourself. You are free to contribute to any repo (but, I would love to see your PRs in my repo 😄)

Hands on Contribution

Gather all the knowledge which I mentioned above and let's apply it here!

First let's go to Commit-to-Success repository.

You will see a interface like this

Next, fork the repo by clicking the Fork button on top-right

You will be redirected to a page, where you can keep everything as default and press Create Fork

Note: Choose your GitHub profile in the Owner section.

It will take a few seconds, and you will be redirected to your forked repo.

Tip: You can identify the forked repo by seeing the URL it will be your-username/Commit-to-Success, while that of the remote repo is Deveesh-Shetty/Commit-to-Success

Next, press green color code button in your forked repo and at the top-right and copy the https url given below

Note: The URL will be different in your case.

Now, open a terminal in the desired place where you would like to have the folder. It can be D Drive, Desktop, your choice.
Next in the terminal type this command to clone the repository:

git clone <copied-url>

Note: Replace <copied-url> with the url you copied in the previous step, without the brackets <>.

It will take a few seconds, and you will see a new folder named Commit-to-Success got created. Now open that folder in your desired text-editor. I will be using VS-Code.
The setup is done! Congratulations on making it till here! Now, Let's get coding (in our case, adding our readme file).

It is always a good practice to create a new branch and do the changes there, while working on others' repo. So we will follow it!

Create and switch to a new branch by using this command:

git checkout -b <your-name>

Note: Replace with your name, for instance I will name it "deveesh", you are free to name the branch whatever you like! You can learn more about branching and it's importance

Now we are in the deveesh branch, let's create a new file with your name for me it is Deveesh.md.

Note: md means markdown file.

Add description about yourself in that file, in my case I will add a small description about myself. Be as creative as you want ✨

# Deveesh Shetty

- President, SOSC
- Passionate Frontend Developer
- Open Source enthusiast.
- 2nd Year CSE Student at Sahyadri

You know the drill next! add, commit and push the changes.

Add the changes

git add .

Commit them with a good commit message like

git commit -m "adds deveesh's profile"

Push them to the branch in your local repository, in my case the branch is deveesh

git push origin deveesh

Note: Replace deveesh with the branch name which you gave in the previous steps!

Now, If you go back to your forked repo, you will see a alert message like this, in there click Compare and Pull Request

Now you will be redirected to "Open a Pull Request" page, fill in the title and description of the Pull Request and press Create a Pull Request

Hurray! You have created your (first) Pull Request. Congratulations 🥳

Now, the reviewer (in this case, I) will review the changes and merge the Pull Request to the main remote repository.

That is the process of contributing to an open-source project in GitHub. It may seem difficult at beginning, but it becomes easier as you progress. Thank you for sticking till the end and completing the Pull Request! That's it for this blog. Hope to
meet you soon, with my another blog 👀

If you liked the blog, like and share so more people can benefit from the knowledge. Stuck at a step? Feel free to reach out to me! Also, would love to hear your opinions in comments down below 😄.

Deveesh Shetty
Github | Twitter

Introduction to GitHub Issues

Deveesh Shetty — Sat, 19 Aug 2023 09:43:01 +0000

You maybe new to GitHub or you are using it from quite a long time. But, have you came across the Issues tab in any GitHub repository? If no, then no worries I will be covering about the Issue tab and how it can make an impact on an open source project.

You may have seen this tab in GitHub, this is the Issues tab. The number you see next to it are the total issues which are currently Open.

What are GitHub Issues?

Issue is one of the feature by GitHub, it provides a way for the users to track tasks, bug fixes, feature requests, etc.

Why would I use GitHub Issues?

There are endless way for why you will be using the GitHub Issues tab, let me break down a few for you!

Raising a bug report

You are using an open source project, and you were trying something but the result you got was not the one you expected, you will be like (it is some bug in the project) and neglect it... No!! You are a good open source contributor it's your responsibility to let the developer know about the bug, so the best way is if the project is open sourced in GitHub, go to the issue tab and tell about the bug, elaborate on what you wanted and what result you got, provide some visual prove like screenshots or video (if possible). This will help the developer to reproduce the bug and fix it in next release!

Giving idea for a new feature

For instance, you are using a software and you have a very good feature which will improve the software. Why keeping the idea to yourself? Raise a new issue in GitHub and describe your idea in human language (yes, you don't even need to code), and mention how it can improve the project. Now anyone interested can take up the issue and start building the feature, even you can build it if you are interested in it, which is very much appreciated!

Note: Most of the softwares you use are open source, but you are not aware of it! I can list a few, VSCode, MonkeyType, Python, Android, Linux, Brave Browser and many more... ✨

How to create a new Issue?

If you found a bug, or you have a new feature Idea. Go to the GitHub repository of the project and click the Issues tab. In there click the New Issue button and describe the bug or feature and Submit voila! you have created a new Issue, also you have a green square in your GitHub heatmap 😉.

Some Notes:

Before creating an issue make sure there is no similar issue already opened, so it will save your's as well as the maintainer's time.
Don't create random issues in repositories, always make sure you have correctly mentioned your plan or described the bug.
Use markdown to describe your issue by using todo-lists, heading, code blocks and many more :)

How to find issues to work as a beginner?

If you are beginner you can find the issues in GitHub repository by filtering with labels like good first issue or first-timers-only or documentation which will help you do your first open source contribution. Most of the repos have these labels which makes it easier for beginners to contribute.

How to work on issues?

Once you found a good issue which you feel like you can work on, put a comment in there that you want to solve it or implement it. So the maintainer can assign you the issue which will make sure no 2 people are working on same issue, which is waste of time for both. Also in contrary, if the issue is already assigned to someone you can't work on it because "Early bird gets the worm". Don't worry try finding another issue there are many...

Now you have the issue assigned, fork and clone the repository and create a new branch and start working (don't know what is branching? check it out here). Once you have a solution for the issue then proceed by creating a Pull Request (PR), now it's maintainers turn to review and merge your PR. If they need any changes do the needful :)

I will be covering about Pull Requests in my upcoming blogs stay tuned for that!
Thanks for sticking till the end... that's all for this blog, let me know your opinions and suggestions so I can improve my future blogs 😄

Deveesh Shetty
Github | Twitter

Learn about Branching in Git

Deveesh Shetty — Mon, 24 Jul 2023 04:29:03 +0000

Branching in Git is a very important and one of the core concepts in version control. It is a game-changer, trust me on that :)

What is Branching?

Let's begin with a simple analogy. Imagine yourself as a skilled artist who loves to paint landscapes of nature, Picture yourself sitting in a serene place working on your masterpiece, already half-way through its creation and you encounter a situation where you feel the need to try a new shade for the painting to experiment with colours. Would you risk making the changes directly on the canvas? Of course not! Instead, you would want to freely try out the new colours in a separate piece of paper. If you like the chosen shades, you’ll add it confidently to your actual painting.
But, if you weren’t satisfied, then you can simply discard the separate piece of paper and save time to protect the painting from a blunder.

So, Branching in Git does the similar thing. If you are working on a project and wish to experiment with new code or implement a new feature, you can simply create a new branch and work on it. If you are satisfied, merge it to the original branch otherwise you can discard it leaving the original code base untouched.

I'll show in detail how that works, so stick till the end 😉

Some pre-requisites before we get started

If you don't know about Git or you are new to it, no need to worry. I have covered all the basic concepts of Git in my blog about Git and GitHub - The Basics.

What is a branch?

A branch is a timeline in which you work and commit code changes.

master or main branch is the main timeline in which you'll be working, the changes made to this branch will reflect in production. (Optional) You can rename this branch as well by using:

git branch -M <new-name>

Then you can create other branches where you will be implementing features, testing out code, and much more by using the following command:

git branch <branch-name>

Now switch to the new branch by using:

git checkout <branch-name>

Replace <branch-name> with a name which reflects the purpose of the branch for eg. feat-dashboard which means I am using this branch to create a new Dashboard Feature.

Pro-tip: You can create a new branch and switch to it in just one command:

git checkout -b <branch-name>

Here, -b flag creates a new branch with the specified name if the branch doesn't already exist.

Let's get started with Hands-on coding

Before continuing with branching commands, ensure that you have some content in the main or master branch, if it is empty, then add a file called Readme.md and add some text in that for instance:

# My name is Deveesh Shetty

Next, "commit and add" the file by using the following command:

git add .
git commit -m "Adds my Readme File"

Create a new feature branch and switch into it by running the command:

git checkout -b feature

Now, you are in the feature branch. Add a file in the new branch called Feature.md and open it and add some content in it:

# Hello from feature branch

You know next, "add and commit" the files by using the following commands:

git add .
git commit -m "Adds a Feature File"

Check the commit history by running:

git log --oneline

You shall see an output similar to:

I want you to notice (HEAD -> feature) where HEAD is the current commit on which you are and feature is the branch we are currently working on.

Now, try switching back to the master or main branch by using either one of these command based on your main branch name (eg.: if the branch name is main then run git checkout main)

git checkout main
# or
git checkout master

If you encounter an error while running this command, one possible issue might be that you haven't committed the code in the current branch. To resolve this make sure to commit your changes to the current branch and then try the above command again.

Run the git log --oneline command again, and compare the output.

What do you see? The file Feature.md is missing and the commit from the feature branch is also not there. This is the concept of branching, the changes you made in another branch are not reflected in the main branch. It prevents many problems such as breaking the production or having unnecessary codes or commits, etc.

How to get the changes in the main branch?

Well, now in a real-world scenario, you have built a feature in a branch and it works perfectly. Now, you want to include it in the main branch and deploy it to production. How do you do it? It's simple! You merge it 😄

What in the world is merging?

When you want changes from the feature branch to be reflected in the main branch, you do that by merging the feature branch with the main branch. During the merge, a new commit called a merge commit will be formed which will include the changes made in the feature branch and show them in the main or master branch.

To achieve this, first, switch to the main or master branch:

git checkout main
# or
git checkout master

And then use the following command to merge the feature branch into main:

git merge feature

Here feature is the name of the branch to be merged.

You should see the Feature.md file in the folder now. Next, run the git log --oneline command again and view the commit history.

You will see the commit made in the feature branch in the main branch. Also, you will notice (HEAD -> master, feature), which means the current commit is same for both the master and feature branch. (It maybe main in your case, don't worry it's the same)

Now you can switch back to the feature branch and start working on it. Once you are comfortable with the changes, merge them into the main branch. It's as simple as that.

This is a visual explaining the branching concept

That's it for branching in this blog. There are many other concepts like Merge Conflicts, Rebasing, etc. that comes with it, which I will be covering in the future blogs 😄. Also there is an upcoming blog on how to create an Issue and send a Pull Request, and contribute to other repositories 👀.

Thank you for sticking till the end! Until then have a great day and happy learning!!!

Deveesh Shetty
Github | Twitter

Git and GitHub for Beginners - The Basics

Deveesh Shetty — Sun, 16 Jul 2023 08:08:38 +0000

Git Git Git... Git is all we hear people talking about these days. Now, you want to know what it is, so you are in the right place 😉.

In this blog you will learn what Git is, why should you be using Git, and how you can start pushing your code to GitHub using Git. And the good part? you won't be needing any prior knowledge for this.

Before we get started, let's see...

A brief Introduction

"Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency." ~ Linus Trovalds

For instance, you are playing a game, where there are checkpoints, so if you lose in the later stages you start again from the previous checkpoint. That is basically one of the many things that Git can help you with.
Apart, from that we can have branches, collaboration, reviews, comments, tracking, etc. don't worry you will be seeing these in the later part of blogs.

Installing Git

Refer to this link to download Git ✨

Getting Started with Git

Okay, that is all theory, let's start with the commands that you need to get started 😄

Now to check whether your machine has Git installed, run the following command

git --version

If you are getting a output with some numbers for eg. git version 2.41.0 (number may not be the same), then you are all ready to go 🥳.

Now you have Git installed in your machine. But, Git doesn't know you. So now, you need to tell your name and email to Git by executing the following commands.

git config --global user.email "<your-email>"
git config --global user.name "<your-name>"

eg.:

git config --global user.email "[email protected]"
git config --global user.name "John Doe"

P.S. Preferred to put your GitHub Email ID

Now to check whether your details are added correctly, execute you should be getting your entered details as the output.

git config --list

If the output is too big scroll down using Arrow-down key there you will find your name and email.

Okay, the above commands are only needed for people who newly installed Git and this shall only be executed once.

Now, Fasten your seat belts and let's get started with Git Commands 🚀

Basic Git Commands

First things first, whenever you start a new project, in that folder you have to initialise a local repository.

git init

You should get a message saying Initialised empty git repository. And also a new hidden file should be formed called .git which git uses to keep track of that folder.

Now the question arises, How do I create a checkpoint and save my code in the Git repository?

For that we will be following these three concepts, you can see them in the flow diagram below.

Let me explain that in detail, when we create a new file, Git doesn't know that there is a new file. So we will be adding the file to staging area where you can check the files and do any optimisation if needed, and also git can keep a track of it. Then we take a snapshot of all the current files i.e basically creating a checkpoint by commiting the files. Then if we have connected our local repository with GitHub then we can push it, so everyone can access those files and collaborate, review and comment on it.

I know this is quite confusing, but it will get cleared as we move on with each step particularly and seeing how to do that using commands.

Add, Commit and Push our code

These are the commands you will be using most of the times while working on your project.

Adding files to Staging area

In the folder create a new file called as Readme.md and write something inside it for eg.

# Hello! My Name is Deveesh Shetty

P.S. .md means a markdown file which is like a text file but with extra features. Like here # represents <h1> tag from HTML

Git doesn't know that you have created a new file, so you can do it by adding the file to the staging area by using the command

git add <file-name>

Here in my case replace the <file-name> with Readme.md

Pro-tip: You can replace the file name with . (a period) to add all the untracked and modified files in that folder to the staging area.

git add .

Removing files from Staging area

Now your files are in the staging area. But you want to remove some files from the staging area which are not ready yet, you can simply do it by using the following command

git reset <file-name>

Creating a Commit

Commit or in simple terms a checkpoint is where you save the past history of your code like a snapshot, and its very important because you can traverse through your previous code iterations and also get to know when was the particular change done in the code.

Once, you have staged all the changes, creating a commit is quite simple by doing

git commit -m "Message describing the changes u made"

Pro-tip: The message you write while committing should give a brief idea about what changes are made while the committing the code.

For example in my case it is:

git commit -m "Adds Readme File"

Now you have created a checkpoint for your code which u can see by running the following command

git log

This command will give you all the commits you made with the Author of the commit, Time when the commit was made, and also a unique ID called Commit Hash with the Commit Message.

The logs will be ordered in descending order, meaning the most recent commit will be at the top and you can access the old ones by pressing Arrow-down key. Once you have gone through it, press q to exit the log command.

If you just want to see the flow of recent commits with no extra information about author and time, you can use the following command to achieve it.

git log --oneline

Also you may, have noticed something like (HEAD -> master) or (HEAD -> main). Here HEAD means the current commit in which you are, in our case it is the most recent commit and main and master means the default branch name. Don't worry about branches right now, it is covered in the later parts of the blog :)

Honorable mention

You can try using this command after each process where it will tell you what is the current status of the files in your project

git status

or to get everything in brief add the -s flag after it.

You will get one or two letters in front of each file-name you can refer this table to know more about it.

Pushing your code

All the things which we did till now is only limited to your PC that's why it is called local repository, no one else can see it.

Now, you are working on a project and you want your friend to help you with that. How can you do it? It's simple you have to push your code to a remote repository, which is basically a folder which is hosted somewhere and it can be access by anyone (U can make it private and limited to few people as well).
This is where GitHub comes into picture. GitHub is a like a storage space for all your git repositories, where people can view, review, comment and collaborate on your code.

Note: You can use any other platform instead of GitHub, like GitLab, BitBucket, etc. Here I am using GitHub in this blog

Before we move on to pushing our code, we have to get working with a few things

If you don't have a GitHub account, create one by going to GitHub
Once you have your account, create a new repository by clicking the + icon on the top-right part of the Navbar.

Give a Name to the repository and if you want you can give a Description as well. Then you can choose the visibility for the repository. Public means it everyone can see it and Private means it is only visible to you and if needed you can select people who can see the repo later in the settings.

The page should look something like this -

Press the Create repository button

You should be redirected to a Quick Setup page, where if you scroll down you can find this code snippet (Don't copy mine as it will be different in your account)

Note: We are pushing an existing git repository because we have already created one in previous steps, no need to redo it.

You can copy and paste those commands to your terminal and it should push your existing code to your remote repository.

But, I won't let you just copy paste, let's see what each command is doing in here

git remote add origin https://github.com/Deveesh-Shetty/Learn-Git.git

In your case the URL will be different
What this command does is, it is telling git to add a remote repository named origin and the path of the repository is mentioned in the url

You can check your remote repository by running

git remote -v

It should list the remote repository(s)

Next command, this is used to make sure that the branch name in the git repository is same as that of GitHub by renaming the branch name, so there won't be any difficulties in later stage.

git branch -M master

Note: In your PC the command may have main instead of master it is totally fine, it is based on the branch name which is mentioned in GitHub. So don't change it.
Also to note, the above two steps is required only once only while creating a new repository.

Finally, we are pushing the code by running

git push -u origin master

If I break it down it will look like this

git push -u <remote-repo-name> <branch-name>

We are telling git to push the code to the remote repository which we added ie origin and to the branch called master or in your case it maybe main.
We are using the -u flag so that next time if we only type git push it will remember the previous instructions and push it to origin master.

Now, if you go back to the GitHub Quick Setup page, and refresh it, Voila! You should see your code there. Now, you can share the GitHub repository link to your friend and show them the projects u made :)

Summarising everything we learned

This is the basic process of how you can add your code to GitHub, and let the world know about your projects. Let me summarise that for you real quick

Whenever you do some changes to your code, add it to the staging area.

git add .

Then when everything looks good, and you are ready to save your process as a checkpoint, commit the code.

git commit -m "what-this-commit-adds/improves"

Then once you are confident enough to show to code to others push it to GitHub

git push origin <branch-name>

<branch-name> can be master or main

So this is how simple Git is, in your next projects start using Git to record your progress and also utilise GitHub to showcase your work and also to work on other cool open source projects.

Next What?

This is the basic commands that you will be using most of the times, but Git is not limited to this there are a lot of things you can do
I am planning to release more blogs continuing this topic, which covers concepts like Branching, Pull Requests, How to Contribute to other's repository and much more.

Let me know how informative you found this blog, so that seeing your reviews I will feel more enthusiastic and if there are any improvements I can do it as well.

Thank you for sticking till the end, see you with another blog 😄.

Deveesh Shetty
Github | Twitter

Contribute to Open Source as a Beginner

Deveesh Shetty — Sun, 11 Jun 2023 07:52:18 +0000

Hey, You heard it right! Open source is for everyone and "Every expert was once a beginner". Start by taking small baby steps by contributing to minute changes to small repositories so you build up confidence to work on bigger projects.

So, thinking of that I have created a project for everyone to contribute. CSS-Is-Fun is a collection of different UI Snippets built using HTML, CSS and JavaScript.

Why CSS-Is-Fun?

Well, it is simple you can create either a simple snippet like a counter to an advanced UI like a dashboard. It is open to all the contributions that you can make. With an easy to follow Readme and Contribution guide this will help you to do your first open source contribution.

What Kind of Snippets can i contribute?

Well it is open to you. You can be as creative as you want in your snippets for instance a button which will give a random quote from an API when you press it or a rigged rock paper scissors game 🤫.
So its up to your imagination and your creative mind.

So for whom are you waiting for? Start building a cool UI Snippet and contribute to the project.

Github Repo - CSS-Is-Fun

Twitter - Deveesh Shetty
Also, would love if you tag me with the snippet you created :) Also if any queries you can DM me, I will be more than happy to answer it.
`
Also, if you are still here I have some great ideas to improve the project and need your help in that

Improve the folder structure so that the main page is not cluttered up.
Trying to automate the Readme file which gets updated as we add new snippets.
Create and host a landing page for the project with all the snippets mentioned in the website with the link to the Creator's Github.

So that is it for the blog post. See you in the flip side. Looking forward to your contribution.

Deveesh Shetty

MongoDB Atlas Hackathon 2022 on DEV

Deveesh Shetty — Wed, 07 Dec 2022 15:41:38 +0000

What I Built

Everyone wants to save money but some struggle with it. Your current savings is your future income. So what could be better than tracking all your expenditures and earnings using an expense Tracker.

So I created an expense tracker using

ReactJs with ViteJs
NodeJs
ExpressJS
MongoDB
Tailwind CSS

Category Submission:

Choose Your Own Adventure

App Link:

Not deployed yet but will deploy it soon

Screenshots

Initial Page

Adding new expenses / earning

List of all transactions till last one

Stock Page

Adding New Stocks same goes with updating

Mobile view (iPhone 5/SE)

Description:

My project is an expense tracker for your expenditures. You can add your earning and expenditure with the source (where it was earned / spent) in the space provided and on updating the current balance will be shown with history of last 3 transactions and the balance at that moment of time. And also on click it shows all the transactions made up to the last transaction in the modal
It uses ReactJs and TailwindCSS for frontend and it is responsive. Also ExpressJs for backend and of course MongoDB Atlas as Database.

P.S. My exams had started in middle on top of that also had some projects, so wasn't able to fully complete it, I had many features in my mind which I will add as I get time.

Future Plans:

Add stocks page where user can add all their stock holdings and get total holdings and if possible use stocks API (if I find one) to get real time stock data.
Find a way such that the expense will be auto updated whenever there is a message by the bank of debit or credit. Will save users time (Not sure if it is possible in Web)

Link to Source Code:

https://github.com/Deveesh-Shetty/Expense-Tracker

Permissive License:

MIT

Background

I saw many people and also myself struggling to keep track where we spent our money. So keeping a track of it will avoid all these confusions.

How I built it

I used MERN stack to build it and actually, it is my second time (the first time was Traversy Media's tutorial) using MongoDB for an full stack application. And yeah the new thing I learned was backend development and I am loving it. Will do more projects keep participating in Hackathons like this and build my skills 🔥🔥.

Additional Resources/Info

YouTube and Dev.to - That's where I learned everything without spending a single rupee