DEV Community: Prakhar Tiwari

How to take care of your Health as a Developer

Prakhar Tiwari — Tue, 29 Nov 2022 07:02:31 +0000

I am suffering from Computer Vision Syndrome 🥴 🖥️ at the time of writing this article, I already suffered from chest pain last year. Migraine pains were frequent, all because I was ignorant about my health. And now as I am serious about it, I feel the need of sharing this information that I got from my doctor and authentic sources online.

Dangers of Sedentary Lifestyle

🔴 A sedentary lifestyle is extremely dangerous. Anything you do, office work, gaming, programming, online class, etc. which involves long hours of sitting, can damage physical and mental health.

In the beginning, we work too much because we have energy and good health, but as time passes, many problems start to arise 📉 which results in pain, wastage of time and money, and even disease. Research conducted over several years has been telling us the effects of prolonged sitting and inactivity, but we still ignore them.

We are just lazy enough to prevent giving time to health, but not the suffering we get destined to because of it, how stupid we are! 🙃

“ Research has linked sitting for long periods of time with a number of health concerns. They include **obesity* and a cluster of conditions — increased blood pressure, high blood sugar, excess body fat around the waist, and unhealthy cholesterol levels — that make up metabolic syndrome. Too much sitting overall and prolonged periods of sitting also seem to increase the risk of death from cardiovascular disease and cancer. “ -* Mayo Clinic

😕 But what can we do Prakhar? We cannot leave our jobs, and desktop computers are now an irreplaceable entity in our world, we cannot get rid of them permanently.

I also asked this question from myself, and therefore I researched everything that could keep me healthy even if I sit for long hours. And believe me, it is possible!

🔖 You should save this article and treat it like a health manual if sitting on computers is a part of your daily routine.

The whole discussion is divided into three topics →

Eyes
Posture
Physical Activity

And at the end, we will know some common solutions for multiple problems.

1. Eyes 👁️

Eyes, you see from them, you know how important they are, so taking care of them is very important.

Here is the curated list of almost every problem and its solution →

Dry Eyes 😵‍💫

When you look at a screen, you blink a LOT less which leads to dry eyes, redness, and itching in the eyes. The normal rate of blinking is about 10-20 times per minute (it varies) but when we are focused on our screen, it comes down to about 2-8 blinks per minute.

Blink consciously every 3-5 seconds, in starting it may be difficult, but be consistent and make a habit. And don’t be ignorant, being mindful of yourself prevents most of the problems. (One more good habit is discussed in Common Solutions)
Also, keep your monitor approx. 30 degrees down from your eye level, you should be looking at the screen slightly downwards.

Keep in mind not to keep it too low as it will result in the neck being bent down a lot, which is again dangerous.

If the screen is above your eye level, more areas of your eyes will be exposed to air, leading to dryness in your eyes quickly.
Prevent any air from blowing directly on your eyes. Use Anti-Glare monitors and prevent any light from reflecting on your screen as it may make it difficult to read.

Fixed Focus 🥸

When we see the screen, our lenses are focused on a fixed distance for a long time, this can lead to a lot of problems related to the eyes. (Solution Discussed in Common Solutions)

Find a comfortable distance from the eyes to the screen, and keep your monitor that far away. It is usually about 1 foot for laptops and 1.5 feet for desktop computers (due to the difference in screen size). You should be able to read the text easily without bending toward the screen.

Affect on Sleep 😪

Blue Light! It comes from your screens but it doesn’t affect you in the day time, because there is a hell lot of blue light coming from the sky than your computer screen, but, studies have shown it blocks a hormone called melatonin that makes you sleepy, which leads to sleep problems.

And NO, you don’t need any kind of computer or blue light filter glasses whatsoever, don’t get into that trap, unless you are fond of making a habit of wearing glass or spending money unnecessarily. Devices nowadays have the feature to reduce blue light built-in.

Use the Blue Light filter or Night Light feature in your devices when it gets dark, and kindly stay away from screens for at least an hour or a half before sleeping for good quality sleep.
You can lower the brightness and use dark mode in dark to prevent eye strains.
Prevent using computers excessively at night or in dark.

2. Posture 🧑‍🦼

I think that most of us who work on computers for a long time tend to sit in comfortable and weird postures (Comment down if you too sit like this often)

This is a very common habit of long-time computer users. But this is a disastrous habit and can

lead to many painful and long-term health issues. Here are some tips to prevent them →

Don’t slouch while sitting.
Buy an ergonomic computer chair, and have the correct sitting posture.

(More things covered in Common Solutions)

I am not telling you everything you need to know, instead, I have shared these really good and authentic resources from where you can learn about body postures:

Posture Manual by Olivier Girard 📔 (An Ebook)
Office ergonomics - secrets to improve your working (A YouTube Playlist)
Bob & Brad (A YouTube Channel)

I am not linking any short videos that you will find on YouTube, they are very small and don’t go deep into the science of posture. You need to understand the problems completely.

Prevent watching short informative videos as they may give you the feeling of knowing enough, but you actually aren’t learning much. That’s why research thoroughly from authentic sources as it is about your health.

3. Physical Activity 🏃🏽‍♀️

All the habits told above will reduce the risk of health issues, but this isn’t enough!

If you think skipping workouts and following these things can keep you healthy lifetime, you are absolutely wrong!

Please understand, our body is not meant for long-time sitting, and this becomes more dangerous when we have a bad lifestyle.

“As a general goal, aim for at least 30 minutes of moderate physical activity every day. If you want to lose weight, maintain weight loss, or meet specific fitness goals, you may need to exercise more” - Mayo Clinic
“ Get at least 150 minutes per week of moderate-intensity aerobic activity or 75 minutes per week of vigorous aerobic activity, or a combination of both preferably spread throughout the week. ” - Heart.org
The ideal workout duration can vary significantly depending on the person, their goals, their preferences, and the exercise type.

For weightlifting and bodyweight strength training, 45–60 minutes per session may suffice.

Meanwhile, cardiovascular and calisthenic training may be better if performed for 30–60 minutes. - Healthline

Read about the benefits of aerobic exercise here

You should give time to your health every day anyhow!

Some days, if you don’t have much time, do it for 5-10 mins. Consistency is important for making good long-lasting habits.

Common Solutions 🌷

Taking Breaks ⏲️

Take breaks every 20-30 mins. You can use any app to remind you of breaks. I personally used Strechly when I was on Windows, it is a great app for this purpose. On Linux, I use Safe Eyes, same concept, just some UI changes, and more features.

One thing I want you to remember is, Never skip breaks, if you start skipping them it will become a habit of yours and your mind will be programmed to click on the skip button, and it is very dangerous for you. You can use the strict mode to remove the skipping break option if you want.

Little Exercises 🧎🏽‍♂️

Exercising your body muscles and Eye muscles during breaks will drastically impact your health in a positive way. You are basically breaking the chain of prolonged sitting hours which prevents a lot of health issues. Body muscles can be stretched a bit, you can take a walk, drink water or do any other activity.
You can follow the 20-20-20 Rule, which says, to take a break every 20 minutes, and focus your eyes on something that is about 20 feet away for about 20 seconds. Eye muscles can be squeezed, eyeballs can be moved in clockwise and anti-clockwise motions, to relax them and prevent any vision issues or other eye problems.

Regular Workouts 🚴🏽‍♂️

A regular health routine is mandatory to have a healthy and happy life. Apply your methods to make that habit, there is no tip that works for everyone, making a habit is purely upon you. You can read Atomic Habits by James Clear, it is a great book to learn about habits.

Final Message ✨

I want to share my personal experience, when I started being aware of myself and gave time to my health, my mental health, productivity, and energy got a Big Boost!

Exercise is really magical, it can suddenly convert your sad mood into a positive one. You can also try jumping during the breaks (not after having food), it helps a lot.

Stop being lazy, make consistent efforts and you will become a better person, and achieve what you aim for.

I hope this article helped you 😇

Thanks for reading my hard work ❤️

How to make an Awesome GitHub Profile

Prakhar Tiwari — Wed, 09 Nov 2022 10:57:44 +0000

Let us start with an activity, the first thing I want you to do is to write a comment in which you are introducing yourself. Also, check out other people’s comments to find some interesting people to connect with!

Developers need to make new connections or find clients, jobs/internships, but what they sometimes miss is having a nice little portfolio where you are telling everything about yourself which is important to make anybody know you well and prompt them to connect with you. Now that person might be a developer, client, or employer, whoever they might be, but the thing that attracts and holds them to know more about YOU is how beautiful, precise, and nicely written your portfolio is.

First of all,

What is a Portfolio?

A portfolio consists of information about you, what skills you have, what projects you have made or worked on, contact details, your work experience (if any), and more.

Now, this portfolio is usually in a form of a website, which contains all of this information and is hosted online, preferably having a custom domain.

But as times are changing, GitHub Profiles are becoming an important place. Employers may visit your GitHub Profile, and can actually see everything you have done in your development journey. They can see projects’ repositories, go through them, read your Profile’s Readme to get the necessary details and see your activity history and open source contributions.

These factors matter a lot now, and therefore, every developer should have a good GitHub Profile.

How to Start?

You first need to make a GitHub Account. After doing so, you will see a blank and lonely profile in front of you 👇

Honestly, seeing this image just freaks me out, I am obsessed with GitHub and if I had to start over, I would first upload all my small to big projects that I have ever made, into this account and have major improvements.

It turns out that this is actually what happened!

I used GitHub for the first time to upload and keep my little projects, until recently (a few months ago) when I got to know the importance and advantage of having a great and active GitHub Profile.

And I would also ask you to do the same, just upload the projects you have already created, doesn’t matter if it is a small program that does a very small task, or a big project, you should showcase everything you have built.

Now I am not gonna tell you the basic stuff that everybody knows how to do, putting a clear picture of yours with a smile, writing a good little bio below the profile picture, having an easy-to-remember and relevant username, and, if you wish so, connecting your Twitter account.

I am gonna guide you elaborately on the step most people struggle with, one of the most important aspects of your profile, the Readme.

What is GitHub Profile Readme?

Readme is a markdown file that contains all the necessary information about the repository.

Now GitHub has a special feature of having a Profile Readme, which means, it is a markdown file that contains all the necessary information about you, let it be your skills, projects, work experience, etc. And this file appears on the very front and makes the first impression. As the old saying goes, “First Impression is the last Impression”.

I don’t know how true it is, but this first impression will decide if the person gets interested in you, or not. That’s why I said it is one of the most important aspects of your profile.

How to make the Profile Readme?

Simply create a new repositor**y, and make sure to **give it the name exactly the same as the username that you have set for your Profile, this is the way to make that special repository, as GitHub tells you 👇

Make sure you tick on this Add a Readme option, as it will automatically create that file for you.

If you ever change your username in the future, don’t forget the change this repository’s name too, otherwise, it won’t work.

After that, you can see this blank repository with a Readme file has been created 👇

When you come back to your main profile page, you will be able to see this Readme file appear on the front.

Now comes the main part…

How to make my Profile Readme beautiful?

As you already know, the Readme file has a .md extension, which means it is a markdown file. Now for those who don’t know what MarkDown is, Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

Learn MarkDown

You will automatically understand what it is once you start creating it. And for that, you need to Learn Basic Markdown! And here is a very good resource for that: https://www.markdownguide.org

It contains pretty much everything you need to know, and yeah you will not be using everything, ~20% of those syntaxes will be used for ~80% of the time. Headings, links, images, and some of the ones that are used most of the time.

Don’t aim for perfection, focus on getting better consistently and not do everything at once. You will, and you should update and improve your Profile Readme from time to time.

To Learn the Basics of Formatting in GitHub, Read this thoroughly. The Basics of Markdown and Formatting in GitHub are almost the same, but to get a better idea and know some additional things, you should read it too.

Learning MarkDown is very beneficial as you will be using it in writing or editing documentation of projects. It is a very useful skill.

Add Basic Sections

In the very beginning, just make a basic version of it. Create some important sections, each having a Heading. Include links wherever you need, and add images to make it look better. Some suggestions of what you can write-

Brief Introduction of yourself
Your Skills
Your Projects
Your Achievements
Your Work Experience (if any)
Your Social Media Handles (Important)

You can make sub-headings if required. Try to use emojis to make it look lively and not boring. 😁

You can use tables to properly arrange your projects’ names, links, and descriptions. And the same can be done with other stuff also.

Prakhar, I have two questions…

How can I align any image or text to the left, center, or right, and how to make it smaller or bigger?
Also, how can have some good-looking icons like these, as plain links look ugly?

Let me answer them one by one.

How to align text or images the way I want?

You can some HTML elements in markdown, and it will work. Yes! HTML code also works in MarkDown but only a few. And if you know basic HTML & CSS, you must be knowing the heading, paragraph, span, anchor & image tags, they all work in MarkDown. To align them, you can use align HTML property to do so.

For example, if you want a text like this let’s say 👇

You can see that the Quote is in the center, and the person’s name is on the right.

Code used to do that 👇

<h2 align="center">"The only way to do great work is to love what you do!"
    <p align="right">
        <em>-Steve Jobs</em>
    </p>
</h2>

You can see that the h2 tag is having a align property whose value is center, this makes the quote come in the center. Then inside the h2 tag, there is a p tag which is also having an align property, but it is right and therefore the text inside the p tag is on the right side. You can notice I have used an em tag to make it italic.

In the same manner, you can align an image to only the left or right. You cannot center an image by using align property inside the HTML tag. To center an image, you need to put it inside either a heading tag or a paragraph tag and put the align property inside them to center it.

As you can see in the image above there is a GIF that is in the center, this is the code used for that 👇

<h3 align="center">
<img src="https://readme-typing-svg.herokuapp.com?font=miracode&duration=3000&pause=500&center=true&vCenter=true&width=435&lines=heyprakhar.xyz;blog.heyprakhar.xyz;twitter.heyprakhar.xyz;linkedin.heyprakhar.xyz;github.heyprakhar.xyz;youtube.heyprakhar.xyz;heyprakhar.xyz/links">
</h3>

And in this image, the image is on the right 👇

The code used for this one is 👇

<img width="300px" align='right' src="https://i.giphy.com/media/10IEUy0f5V3WLu/giphy.webp">

ℹ️ Tip: You can use Giphy to get your desired GIFs. For transparent GIFs, click on the stickers button after you search. I use it for my GIFs most of the time.

How to change the size of an image?

Again, you need to use the HTML img tag for that. Just use the width attribute to set a custom size like 200px, 20%, or something.

For Example,

This is an image I have used, it is having a custom size to make it smaller and adjust on the right side 👇

Code used for this 👇

<img **width="150px"** align='right' src="https://i.giphy.com/media/TEILCythSScYyaaEDK/giphy.webp">

You can notice the width=”150px” part.

This is how you can change the size of any image in MarkDown.

Now answer the second question,

How to Add Cool Icons?

There are many resources online that you can use to do so, but one tool that is widely used all over GitHub is Shields.io. Its interface may look a little confusing if you are visiting it for the first time, but don’t worry, you will learn it with time. This resource is built mainly for Projects, and therefore 99% of the stuff present there is of no use for now in making your Profile Readme.

On the main page, scroll down and come to the YOUR BADGE Section,

Here, you can create custom badges, and then use the custom properties listed below on the website to style them. The label is not required, so you can leave it blank and write the Text you want on the Badge in the message input. You can select your desired color from the color dropdown. After that, click on the Make Badge button and a new tab will be opened that will have your custom badge. To use this custom badge, simply copy the URL of the badge and use it as the source of an image, you may use MarkDown or HTML syntax for the image.

For example,

This is a custom badge 👇

Code used for it 👇

<a href="https://twitter.com/Prakhartiwari0" target="_blank">
<img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter">
</a>

As you can see, I have used the URL as the value of the src attribute of an img tag. Now that img tag is inside an anchor tag, which means that the image is a link, and whenever somebody clicks on that image, which is basically my custom badge, that person will be redirected to my Twitter Handle. (target=”_blank” makes the link open in a new tab and not in the same tab)

These are the custom badges I have used 👇

Code used for this 👇

<p align='center'>
<a href="https://twitter.com/Prakhartiwari0" target="_blank">
<img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter">
</a>&nbsp;<a href="https://www.linkedin.com/in/prakhartiwari0" target="_blank">
<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="Linkedin">
</a>&nbsp;<a href="https://discordapp.com/users/800602051200679971" target="_blank"><img src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord"></a>&nbsp;<a href="https://blog.heyprakhar.xyz" target="_blank">
<img src="https://img.shields.io/badge/-Tech%20Blog-orange?style=for-the-badge" alt="Tech Blog">
</a>
</p>

As you can see here, I have used multiple img tags, each of them is inside an anchor tag, and the whole stuff is again inside a paragraph tag which is aligned in the center, so all the badges are aligned in the center in the same row. (  is an HTML entity. It is a non-breaking space, it is a space that will not break into a new line. Two words separated by a non-breaking space will stick together and not break into a new line)

If you focus on the links of the custom badges in the src attribute of img tags, they have some custom properties. By default the custom badge looks pretty ugly, you may leave it like that if you want, but styling them enhances the look. To know how to style the badge, read the STYLES Section of Shields.io.

How to Add Cool GitHub Stats?

Almost everyone on GitHub uses Anurag’s GitHub-Readme-Stats, and I use it too. So I recommend checking out that repository and reading the well-written documentation to know everything about Adding and Customizing your GitHub Stats. As I said, the documentation is well-written so no need of writing a tutorial here.

Extra Tips

Here are some ideas from my side for your Profile 👇

Divide your Sections: Add horizontal lines in your Readme by using --- (3 dashes). It looks great. You can also use <hr> HTML tag for this, an advantage of using the HTML tag is that you can change its width!
Add a Contents Section: It makes navigation easier, people can click on the links and directly jump to the headings without scrolling. To make it work, you need to give an id to the heading. After that, you can create a link that has its URL as the id of that heading. For example, <a href=”#heading”> A Heading </a> will send you to an element whose id is heading. To give an id to a heading → <h2 id=”heading”> This is the Heading </h2>.
Add a Typing Animation GIF: If you come to my GitHub Profile, you can see a typing animation at the top. To get that, go to Readme Typing SVG and create your desired GIF, after that just copy the code in either HTML or MarkDown, and paste it into your Readme.
Be Active: Your Activity is what gives the visitor the sense of your dedication towards learning, and contributing. So actively make projects, push commits, and contribute to Open Source!
Pin Good Projects: If you built any good projects that you want people to see whenever they visit your profile, make sure to pin them so that it appears just below your Profile Readme on the Front Page.
Join GitHub Organizations: Joining various Organizations on GitHub is very helpful and if you are active in tech communities online, your network grows and you get known in the tech world. The Organizations that you have joined are shown on the Front Page, so it tells that you enjoy being part of a group.

Be Creative!

One of the most important skills to have is creativity, and you should use it to make your Profile Readme look amazing. Just experiment with various syntaxes, put things inside tables, explore what more can be done, and search the Internet on how to do various stuff.

I highly recommend looking at the code of other people’s GitHub Profile Readme, as it really helps and gives a lot of ideas. Here are some resources to help you find some-

Summary

To align a text in MarkDown, use the HTML tags like p, h1-h3, span, and put the align property inside it and give the desired value (left, center, or right).
To align an image in MarkDown, you can use img tag and use the align property, but it will work only for left and right values. To center the image, you need to put the image inside another HTML tag like p, h1-h3, or span, and then put the align property inside them with the center value. This will center the image.
To change the size of an image, use the img tag and use the width attribute to set a custom size.
To add custom icons, use Shields.io Custom Badges, and use Custom Properties to style them.
To add GitHub Stats, go to Anurag’s GitHub-Readme-Stats Repository and read the documentation of it.
Learn, Explore, Experiment, and Be Creative!

I hope this was helpful, consider adding feedback in the comments 😇

Thanks for reading my hard work,

Take care of yourself ❤️

Useful websites that I have bookmarked (& you should too) to Learn & Practice JavaScript

Prakhar Tiwari — Mon, 31 Oct 2022 05:51:26 +0000

Learning JavaScript online from video tutorials is not enough, you should practice your knowledge too. Also, video tutorials don't really contain an in-depth knowledge about the concepts, they may be successful in explaining things, but to dive-deeper, there is something more you need, and this short post is written to tell you about that only!

JS Challenger

This place offers good practice questions for JS. However, you need to pay to make an account and save your progress, and for some questions too.

Learn JavaScript Gitbook

A short and easy gitbook to learn basic JavaScript

JavaScript Quiz

A good website for testing your Javascript knowledge via quiz

JavaScript.info

My favourite place to learn JavaScript, this website has elaborate content about all the concepts of JS with exercises and is a great place to learn from beginner to advance.

And lastly,

The Eloquent JavaScript

This book is excellent for web developers to learn JS concepts deeply. However, it may not be suitable for beginners, but a must-have after you have strong basics.

Purchase from Amazon - https://amzn.to/3Fwk0pA

Read Online for free - https://eloquentjavascript.net

Thanks for reading! Hope I was able to add some value 😇

Check out the Twitter thread I originally talked about these resources - // Detect dark theme var iframe = document.getElementById('tweet-1586952879923134464-31'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1586952879923134464&theme=dark" }

New to Open Source? Know everything you need to!

Prakhar Tiwari — Fri, 28 Oct 2022 10:05:17 +0000

Save this article right now! It is a complete guidebook, it contains almost everything you need to know to start or boost your journey in Open Source. And I know not everything can be covered, therefore I have included a lot of resources to make your knowledge deeper and the concept clearer.

My First piece of Advice to you-

If you are hopping here and there for a long time, watching videos about open source, and how to start, stop that right now, and start doing it, the best way to learn and get better is only by DOING IT YOURSELF!

Now No time waste, coming straight to the point.

What is Open Source?

Let us not go deep into technical terms, you can gradually know all of that in future, but as of now, the very basic meaning of “Open Source” is something, whose source is open or available to everyone. Now that something can be a web app, desktop app, documentation, project, tool, resource, etc. And the source is the original code, or source code, documents, assets, and everything that is used to build it up. So, if they are available to the public, anybody can see the code and what’s going on behind the scenes, which is great for security, privacy, and righteousness. Because anybody can contribute, developers can make changes to it to solve any problem, add features, or just improve the code.

Non-code contributions are also a thing, and we shall not underestimate them, any contribution that helps an open-source project that does not involve writing code for example improving documentation is a non-code contribution. {Read this Dev.to Blog Post to know more}

Now here are a few examples of things which are open source, so that you can understand better -

Linux (Used mostly in servers, basically, Linux powers the Internet you are using 😉)
Mozilla Firefox (A great competitor in the browsers market of the big tech giants to prevent their monopoly)
VLC media player (A widely used Media Player)
GIMP (A raster graphics editor used for image manipulation and image editing, free-form drawing, transcoding between different image file formats, and more specialized tasks)
Android (Need not tell much about it, it is an operating system for mobile devices)

The list will go on and you can find more by exploring a bit. The point is, these projects are open and anybody can contribute to them. This is not the case with closed-source projects, their source code is not public, you cannot contribute to them, you don’t know what’s going on behind the scenes, and they are owned by any company or organization.

Now you have got the basics, moving forward, you may ask…

Why is Open Source Important?

This article will be focusing on the practical aspects, so here are the best resources I could find over the internet to save you time, you want to know about this topic -

Why Open Source? by Opensource.google & What is Open Source, and why is it important? by IBM Developer

Okay now, next question, for the ones who want their own benefit too (nothing bad in it, but there is something you need to be mindful of, continue reading to know that)

Why Contribute to Open Source? What are the Benefits of it?

See my friend, the benefits are huge, it can give you a little satisfaction, or a good job! and I am not exaggerating it, it is a widely known fact in the tech community. I need not answer this question because you will feel the benefits yourself, but here are some of the benefits that I personally experienced →

Contributing helps me understand the level of my knowledge and improves my skills a lot!
I apply and use my skills in real-world projects
It helps me make new connections and network with people
I learn to collaborate on projects and teamwork
It makes my portfolio/resume/CV a lot better and works as a verification that I have this skill and can apply it to the real world, which increases my chances to get a job or internship.
It gives me happiness, that I have helped somebody with something, and contributed to a project.

You can read this Twitter thread by Community Classroom to know a little more.

⚠️ ALERT ⚠️ If you are thinking of those benefits only, please don’t start with open source. You have to have good intentions, which means you should contribute not for the benefits, but for helping others, and not expect anything in return. I know this may sound a little weird, but you should first become a person who contributes to other projects with the will to help them with your skills and improve yourself, and not someone who does that just for getting something in return.

Now, in real life, this mindset will make you grow a lot more in your career than the other one, which is doing it for the benefit. Yes! people will trust you more, you can be a part of tech communities, you can make your network larger, and you will get more offers because you are not a selfish person. I hope you get my point.

How to Contribute?!

Okay Now I want to contribute to my favourite open-source software, umm let’s say Linux!

Starting with the biggest ones is the only way to go, Right? I mean who would even look at smaller projects?

WRONG!

First of all, the chances of you having skills of the level that you can contribute to those large projects are really less, after all, you are here because most probably you want to start your open-source journey, you cannot handle so many things in the starting.

And lastly, the point that smaller projects have no value is pretty illogical. Every big project today was once a really small one. Even if the future of any small project is not decided, contributing to it still helps a lot. In the beginning, you should start with the smaller ones to get the basics right and make mistakes early on, because those mistakes can become disastrous in the future when you are working on bigger projects.

As Eddie Says -

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

Where to Start?

GitHub is the best place to start, because it is a widely used platform all over the world, and natively supports Git Version Control System (VCS). You need to learn how to use Git to be able to work on projects.

What are Git, Version Control System and GitHub?

Note: Git and GitHub are two different things. Git is a version control system while GitHub is a hosting service, there are other hosting services too like BitBucket, GitLab etc.

Now, What is GitHub? as Wikipedia says,

“GitHub is an Internet hosting service for software development and version control using Git.”

So basically GitHub is a platform that allows you to host your Git projects on a remote server somewhere (or in other words, in the cloud).

There are some terminology and concepts you need to understand, which will help you to start your journey in open source.

Starting with the jargon I used in the beginning, Git, VCS, what is all of this?

Let us understand this in very simple terms, now imagine a scenario you are building the next software that will change the world. When you start coding this project, you cannot make everything once, you cannot include all the features, or have a complete bug-free code. There will be a lot of bugs in the code, you will need to add various features or just make improvements to it with time. This means you need to upgrade your app to a newer version.

This is where the concept of Version Control comes, why it is needed? Because many times you will need to revert your changes to the previous version or make sure that the new feature you are adding isn’t having some bad effects on the other parts of the code. So you need to keep track of all the changes done to your project.

The worst thing any developer can do is to make a separate copy after every change 😂

“Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.”

You can read about Version Control in brief here.

I hope you have got a basic idea of what is Git & Version Control. If you want to learn Git in depth you can get Pro Git by Scott & Ben, it is also available as a PDF online or I would highly recommend going through this page. If you want a quick start, you can watch this video by Kunal Kushwaha.

Now, as I told you that you can host your projects on GitHub, a repository contains all of your project's files and each file's revision history. You can discuss and manage your project's work within the repository. You can learn everything about them from here.

Now a repository is owned by a user or organization, and nobody else can make changes to them. Then how come other people contribute to it? Well, here comes the easy concept of Forking a Repo.

What is Forking a Repo?

When you open a repository, you can see the three buttons on the top right part. There exists the Fork Button. When you click on it, this thing appears -

Is everything clear?

So a Fork is basically a copy of a repository which is kept in your account, and you can do anything with that copy because it is owned by you.

So this is contributing? Just making a copy of other projects and playing with it on our own account?

Umm No…

Then how can we contribute to the actual original project?

Well, here comes the concept of Pull Request, or PR. I know I have used this multiple times till now, and you may have gotten confused, sorry for that.

What is a Pull Request (PR)?

Till now you have learnt how to fork a repo but to actually contribute to the real project, you need to request the maintainers of that project to accept your changes, and you do that by making a Pull Request, you can remember it as “A request to pull your changes into their project”. Or as the documentation of GitHub tells us,

Pull requests let you tell others about changes you've pushed to a branch in a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before your changes are merged into the base branch.

Branches? Commits? What are all these now?

If you haven’t already, I highly recommend exploring Git-SCM Docs as it will clear your concepts further.

Or if you like my way of teaching, please comment down below to have a blog on the complete basics of Git & GitHub. I will do it for sure.

Wait, what is that SCM?

Well, SCM is Source Code Management, I have already explained to you what Source code is in the very beginning, and you must be knowing what management is, no need to explain it further.

Back to the topic, after you create a pull request, the maintainers will review it and tell if it needs any changes. Collaborators of the project can discuss what changes should be done and how. After all the discussion, the final changes are approved, and the moment every open source contributor waits for comes, your Pull Request Gets Merged!!

Merging means that your proposed changes are added to the source code of the original project. Your concepts will get a lot clear when you understand the concept of Branches and how Git Functions.

But that doesn’t end here, there is something waiting for you if you did some mistakes while working on the project.

Merge Conflicts!

What are Merge Conflicts?

As the documentation of Github says,

Often, merge conflicts happen when people make different changes to the same line of the same file, or when one person edits a file and another person deletes the same file. You must resolve all merge conflicts before you can merge a pull request on GitHub.

Did you get it?

See, if two people made changes to the project, and there were some common lines that were changed by both of them, how can the computer know which change to accept and which not?

This causes merge conflicts, and humans, need to resolve them to merge the changes.

I hope you have understood the basics.

Okay, Prakhar all of this was great but how can I find the projects that I can work on with whatever skills I have? I don’t think I am ready, I need to become a master before contributing.

No, you need not. As I said in the starting, you need to do stuff to actually get better. Just go to GitHub, you don’t have an account, make one, and find projects that you can contribute to.

How to find Beginner Friendly Projects on GitHub?

Okay, now I am gonna give you 1 really good resource from where you can learn how to find projects, and tools which will help you in searching for them.

A guide to contributing to open source by Freecodecamp.org → It is a GitHub Repo by Freecodecamp which includes everything you need to start your journey in Open Source.

This is all you need! I repeat this is all you need!

Go through this completely, it’s available in multiple languages also, explore all the links it has, read it readme thoroughly, and stop hopping here and there now.

If you demand a video resource of the same value, here it is →

Complete Guide to Open Source - How to Contribute by Eddie Jaoude on Freecodecamp YouTube Channel

Again, this is all you need 😇

I want to keep the number of resources minimum, therefore you may have noticed I am only linking to necessary documentation and not just random places. To become a good developer, you need to learn the art of reading and learning from documentation, experimenting and exploring stuff and have a hands-on approach while learning.

But wait, there’s one more thing.

Remember we talked about the mindset before starting to contribute? That mindset is really important while you are contributing because you should add some value to the project and not do anything random or useless just for showing on your profile that you contributed somewhere.

You can watch this video by WebDevSimplified and feel the anger and frustration that maintainers go through while cleaning up the spammy Pull Requests which don’t add any value to the project and were made by some people who had an intention not to contribute, but, get the swags and t-shirts. It’s Crazy! I guess you now get the point of why it’s super important to have the mindset of helping.

And yeah he is referring to Hacktoberfest, I have already written about it in my First Contribution HacktoberFest Contribution Blog Post, kindly read it if you are curious.

Thank you for Reading

It was quite a long post, right?

But it’s worth reading till here, I have tried my best to not leave you dissatisfied.

At last, I would like to thank everybody who helped me in my journey.

And Thank You for reading my hard work.

Take Care ❤️

Sharing my little journey of HacktoberFest with you!

Prakhar Tiwari — Wed, 26 Oct 2022 17:57:50 +0000

What is Hacktoberfest? (for complete beginners)

As the official website of Hacktoberfest (https://hacktoberfest.com) says-

“HACKTOBERFEST IS FOR **EVERYONE. WHETHER IT’S YOUR **FIRST TIME—OR YOUR NINTH—IT’S ALMOST TIME TO HACK OUT **FOUR* PRISTINE PULL/MERGE REQUESTS AND COMPLETE YOUR MISSION FOR OPEN SOURCE.”*

Everyone, First Time, Four PRs, and Open Source.

You need to contribute to open-source projects, you need to make 4 successful Pull Requests, basically, PRs that are accepted and merged in the project before the ending date of Hacktoberfest. This is it, this is Hacktoberfest!

Some rules are there though, those projects must be participating in Hacktoberfest and should be following the guidelines, and your PRs should also follow the guidelines. You can know more about these things on their website, no need to repeat everything again here.

My Story of Getting into Open Source

So I first got to know about Open Source from Kunal and Eddie. I got interested as they really insisted upon contributing to Open-Source. And as I love to experiment and try out new things, I rebuilt my GitHub Profile, which was blank for a few years because I knew nothing about that place before, then I learnt how to use Git, and GitHub, what is everything & how it works. It was quite confusing and challenging in the starting, but I never stopped.

If something is hard for you, do something to make it even harder, and challenge yourself, if you are somebody who never gives up, you will learn great things.

… And I did the same! I participated in a Hackathon, made a team of 3, and started working on a project. No experience of working in a team before, using Git/GitHub as a team, maintaining a project, or anything. Complete noob. But I learnt things along the way. Various kinds of errors and merge conflicts appeared along the way, I gradually solved all of them. We didn’t win, but that experience taught me so many things, that it became really easy to contribute to Open Source Projects on GitHub and operate Git. It was a piece of cake now.

[By the way, my first open-source contribution was centring an image on a website 😅]

You can get inspiration from my little story, as this is the proof that everyone can do it, and as Pradumn says -

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

If you want to know more about Open Source and how to get started, there are great videos by Eddie and Kunal on YouTube you can check out as I did the same.

I will also be writing an article on this topic, so stay tuned if you are interested 👀

Starting out with Hacktoberfest 2022! (My First Time 🤩)

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

So as I was now active in the Open Source World, it was obvious to get to know about Hacktoberfest. I heard about it last year also but wasn’t knowing the ABC of Open Source. In the starting I thought that probably this is not for me, because I only know HTML, CSS and Basic Python, what can I even contribute with these little skills?

But as I researched more and more, I made up my mind to at least give it a shot. This can work as a booster for my Open Source Journey. I never thought of getting the swags, I only did it to boost up my Open Source work. I was already firing the bullets of contributions to open-source projects, now I needed to target the HacktoberFest projects, this is the best way I can put it 😅.

Problems will always be waiting for you…

Now in the starting, it was kinda hard to find good projects where I can contribute, if I get any, a lot of problems popped up, for example, lack of skills, unable to find issues I can work on and if I get any good issue, it is already assigned. Huh, that was irritating in the starting, but I kept searching.

A lot of other problems occurred in my life, I was going through physical and mental health issues. I couldn’t sit at my desk as my body didn’t allow it, and I cannot focus as my mind was not at peace. These things pulled my legs down and I was once pretty sure that I am not gonna make it.

With time, even while being physically unfit, I gave very little time to coding every day. Luckily I got some good projects and raised issues I can work on. Little work every day, with a lot of dedication, I solved them and created my PRs. A few of those projects were not accepted by Hacktoberfest as they were not according to their guidelines.

The Taste of Hard Work

Days passed, and finally, I had 4 merged PRs by the half of October. I took a breath of satisfaction and calmness. Finally, it was completed. 4 out of 4 successful PRs! 🥳

(I 🔴live-streamed my last contribution, you may check it out, but it’s in the Hindi Language. This was my first live-stream on my YouTube channel)

The happiness I got from this significantly improved my mental and physical health. 🌱

I still wasn’t thinking of those prizes, I literally did it for fun as I said earlier, and this mindset of enjoying the process rather than focusing on the end goal helped me a lot. Prizes are only a way of appreciation for our good work, we should not make them the ultimate goal.

During these times, I shared my achievements on Twitter, here is the tweet when my last PR was accepted -

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

Acknowledgements

I want to thank everybody who helped me out during this time and appreciate the efforts of everyone who is trying to help others and contribute whatever they can to make this world a better place. ☺️

Also, Thank You for reading this post, I hope it inspires you to do good work for this world ✨

Keep Contributing and Take Care ❤️