Forem: Sadanand Pai

DSA for Frontend devs

Sadanand Pai — Thu, 22 Jun 2023 08:12:43 +0000

Hello folks,

Today, we'll discuss a contentious issue that is frequently raised. Do frontend developers require DSA? I'll discuss the value of DSA and the interview environment that surrounds it with you. We'll try to ultimately uncover the unknowns and let us get clarity on the same.

What is DSA

Data Structures and Algorithms is what DSA stands for. It is one of the key areas of computer science and involves math, justifications, problem-solving strategies, optimizations, etc.

Data structure: The way data is stored or represented

Algorithms: A step-by-step process to solve a problem

Each day, we write tens of thousands of lines of code as software developers. The majority of the code is often written in JavaScript by frontend developers. Our projects present us with several everyday coding problems that we must resolve to finish our work. One of the key competencies that any front-end developer should possess is the ability to solve problems and consistently finish their logic.

Before proceeding further with the discussion of DSA, let's look at the importance of DSA in general.

How does DSA help a programmer?

I would like to start by giving an analogy. Assume there is an artist. His or her job is to draw or paint. To become an artist, one needs mainly two things.

The first is the tools. He/she needs to have brushes, pencils, colors, paper, etc.
The other thing which makes a painter needs to have is a way to use these tools, a process, or a procedure.

The artist will need a variety of colored pencils, brushes, and shading techniques to draw complicated art, such as a person's face. A beautiful drawing will be produced if the artist properly employs the correct tools. Furthermore, if the artist lacks some of the required equipment or is unable to use some of it, the quality of the artwork may suffer. Additionally, a lot of time and work may be required to create the same painting. In other cases, an artist may not even be able to sketch if they lack the necessary supplies or drawing techniques.

Why did we talk about art? Here, the art tools stand in for the data structures. Additionally, the act of drawing is a representation of algorithms.

Programming is no less than an art

Developers must use the appropriate set of data structures and algorithms when writing code, much like when creating a beautiful painting. If a developer writes code without the proper DS or algorithm, writing and running the code may require a lot of work and time. And in many situations, having a lack of knowledge may also prevent you from coming up with a solution.

Importance of DSA

With the help of a simple coding example, I will highlight the importance of DSA in our daily programming.

Problem statement: You are asked to find the students who have scored highest and lowest in a class.

First Solution: The simple procedure you follow might be to sort the list of students according to their marks. And then pick the names from the start and end of the list. It is simple.

If a class has 30 students, sorting the students by marks is an easy task. What if you are asked to find the students with the highest and lowest marks from the whole college? The total number of students may reach 300 or 3000. It is not easy for humans to perform sorting, but for computers, it may look almost the same. No big deal. But what if you are asked to find students from a country? The solution proposed may take years for humans and a huge amount of time for computers. Something that makes you think now.

Second solution: We just need to find the highest and lowest-scored students. Check the marks of each student and keep a note of who has scored highest and lowest. No sorting is needed for this.

The second solution is much better than the first one for the given question. But how was I able to tell that the second solution was better? This is one of the places where knowledge of data structures and algorithms comes into play.

Where the hell is DSA?

You may argue that the above-given task is not a DSA problem. Where is the data structure like a Tree or Graph and where the hell is the algorithm in there?

Read the definitions of data structures & algorithms. Here, the list of students stored in an array or list is a data structure. The procedure to get the highest and lowest marks for students is the algorithm. We stored the student data in the right data structure and then ran the algorithm to find the required students.

We discussed a lot about DSA without using a code snippet of any programming language. DSA is about concepts and is not particularly related to any programming language.

Before moving on, let us be on the same page. DSA is not only about fancy and advanced concepts of problem-solving such as graphs and dynamic programming. DSA starts with the basics of programming and optimization. DSA is not only about problems that we solve on Leetcode.

DSA for interviews

DSA was not heavily involved in interviews in the past. Different digital products were being built by businesses using the waterfall process. As electronic gadgets became more widely available, there was an exponential rise in demand for better softwares. More softwares were being created by businesses, and these products were receiving numerous updates. Businesses began implementing agile methodologies. Robust, scalable, and highly efficient code is increasingly needed to meet the expanding demand and adapt to the changing requirements. So there is a need for competent developers.

Companies, particularly those that manufacture products, started looking for talented programmers to design excellent code so that the items they create can be updated or improved more affordably. Additionally, the program should be lightning-fast to draw in more clients to their merchandise. The necessity to overcome challenging programming problems grew. It has also become necessary to provide effective frameworks and libraries. The performance (duration of execution) of the code becomes crucial.

Companies began structuring the interviews so that they could find qualified programmers. DSA became so common in interviews that most businesses now have at least one round specifically for it. The DSA round required difficult problems to be solved by the candidates to pass the interviews because the real-world challenges that had to be solved were challenging in a number of scenarios.

The DSA round was eventually added to the interviews by all companies, and the tendency persisted. The majority of businesses never even consider whether they need a specific DSA round for the position they are hiring for. Additionally, they frequently use medium- or difficult-level problems pulled at random from Leetcode.

Companies must be aware of the DSA requirements for the positions for which they are hiring and adjust the DSA interview process accordingly. But on the other hand as a candidate, you don't have control over it. It is a game. They are rule setters. Play the game as per their game rules if you want to win it.

Is DSA needed for Frontend developers?

There is a huge debate everywhere nowadays around a few questions related to DSA in the frontend world,

Should frontend developers learn DSA?
Should there be a DSA round for frontend developers?
How much DSA is needed for frontend developers?

"DSA is not required for frontend developers", according to a lot of individuals on YouTube and other channels. They mean to argue that frontend developers won't require advanced DSA. There is no clear line between what is basic and what is advanced, and we won't get into that issue here. The phrase "whether DSA is needed or not" is not a boolean thing. There isn't a yes/no answer to this.

We have advanced much if we consider the development of the frontend ecosystem. There was a time when JavaScript was primarily used for simple UI tasks, but today we utilize JavaScript to construct complete end-to-end systems. Frontend web development now includes everything from interactive online editors to graphically intensive games. Frameworks and libraries for the front end have never been so plentiful. Various frontend areas desperately need DSA.

This does not imply that frontend devs in every project or firm are required to have extensive DSA knowledge. A few frontend positions only need a working grasp of JavaScript. We must assess our objectives and job descriptions to modify the need for DSA for roles. We need to stop fearing or disliking the word DSA, and instead embrace the knowledge it offers to aim to become highly competent programmers and good developers.

Conclusion

All of us are engineers. Building high-quality products that are scalable, reliable, and efficient should be our main priority. If DSA can assist us in this, we ought to choose it rather than reject it. Problem-solving in the real world is what we prioritize.

A good engineer is a good problem solver too.

I hope I was able to shed some light on the confusion around DSA and help you to get some clarity. Also, I expect that you are now in a better place to judge whether as a frontend developer, should you focus on DSA for your work or interviews.

High-quality resources for frontend web devs

Sadanand Pai — Fri, 09 Jun 2023 04:45:12 +0000

High-quality resources that every frontend web dev should be aware of

(most of them are free)

Source: Frontend Learning Kit

HTML

📗 MDN HTML
📗 W3 Schools
📗 HTML Tutorial

CSS

Advanced CSS

📘 Debugging CSS
🎥 CSS Demystified

JavaScript

Advanced JavaScript

📗 You don't know JS
📗 Secrets of the JavaScript Ninja
📘 Deep JavaScript
📘 Professional JavaScript for Web developers
🎥 Deep JavaScript Foundations
🎥 JavaScript Hard Parts
🎥 JavaScript: Understanding the Weird Parts

TypeScript

React

📗 React Dev
🎥 React - The Complete Guide
🎥 Epic React
🎥 Scrimba - Learn React for free interactively

React Repos

📁 React TypeScript Cheatsheet
📁 Entire React code base explanation by visual block
📁 Bulletproof React

Other frameworks

HTTP

📗 MDN HTTP
📘 HTTP2 in Action

Git

Web Performance & Security

Accessibility

JS Design Patterns

JS Best practices

Functional JavaScript

Frontend youtube channels

Interview Prep Resources

Interview Prep channels

🎥 Namaste JavaScript
🎥 Chirag Goel
🎥 Devtools Tech Frontend Interview Series
🎥 RoadsideCoder
🎥 Front-End Engineer
🎥 JS Cafe
🎥 Uncommon Geeks

Coding challenges

DSA resources

DSA youtube

Coding platforms

🚉 Leetcode
🚉 Hackerrank
🚉 Interviewbit

Peerlist: A simple but powerful portfolio

Sadanand Pai — Sun, 25 Sep 2022 11:07:53 +0000

Hello folks,

In this blog, I will briefly talk about building a clean portfolio and how Peerlist does the job perfectly for our needs. If you have not heard about Peerlist you should visit the website right away.

Developer portfolio

Nowadays every engineer should have a portfolio website. Be it a basic HTML portfolio or an animated visually attractive portfolio, everyone is supposed to have one. Especially when you are a developer, a portfolio website is asked in resumes, interviews, freelancing, etc. Many people also use the GitHub readme page itself as their Portfolio showcasing the different repositories as the projects.

As I am a frontend developer, I was looking for a neat and simple portfolio that can be used to showcase my work. After the recent introduction of Github readme profiles, I updated the same with my details. This does the job to some extent.

I joined Peerlist when I came across a post on my Twitter feed that had an invite to join its beta. I visited Peerlist and the UI was catchy. The design of the portfolio suited my requirements. I just started creating my profile on the Peerlist. Also, I referred a few of my friends to Peerlist.

Here is the link to my Peerlist profile. The profile/portfolio can be accessed by anyone on the internet without the need for a login, unlike Linkedin which asks you for login or registration sometimes to view the profile. Above you can see the hero section, designed in a simple way highlighting the skills and the social media links.

The best part about the portfolio is that it integrates well with the Github account. You can provide the username and list the important Github repositories to showcase on the page. Peerlist portfolio also supports adding your custom project and blog integrations.

Resume

Many of the above features may not be present in other social profiles but are not something new. What is unique in Peerlist is the authenticity of the profiles when it comes to your work.

You should be able to see a green tick mark displayed in front of my latest work experience in the resume tab. Peerlist helps to increase the genuineness of the profile by verifying my current work email address. Similar things you would have noticed against the Github profile as well. It is very easy to create a fake profile by adding the top companies to one's profile. This is a very good feature to have on any social media platform and Peerlist is one of the earliest adopters of this.

Jobs

Peerlist has also added a new section called "Find Jobs". This is for searching the jobs suitable for your skills. You have the option to save the jobs to which you think you can apply in the future and also can track the jobs applied to, in the "Applied" tab.

You can mark if you are open to the opportunities along with your other job preferences. You can also opt for posting the jobs in your company but at the moment only allowed if you are having an invite for the same.

What can be different?

As we know there are a lot of social media platforms out there, and it is not easy to have an edge. A few of the things which I feel Peerlist can do differently are

Client details in the resume

Many of us would have worked or known the people who work on a contract basis or as a consultant. Such roles require working for a specific client at the client location with the payroll from the parent company which is the consulting firm. Usually, in such cases, the client company is more popular than the parent company. Also, the chances are that the person might have worked for multiple clients from the same parent company. In such cases, it would very helpful to have the feature in the resume to have the client and parent company details.

Advanced filter for Jobs

Peerlist has recently added the Jobs section. A must-have feature for a website like this. When I was actively searching for a job, it was hard to get the right match. The major issue I faced was that the proficiency of expected skills was not aligned with the proficiencies I had. Either it was too low or too high.

Let me take an example to explain this. The skillset for an open position might be React, Redux, TypeScript, JavaScript, and CSS. I may be having knowledge and experience in all of these. But the proficiency levels are not known. The position may demand the highest level of expertise in React and Redux which is not known to us. Let's assume I have the highest level of expertise in JavaScript and CSS. Though there is an exact match in the skillset I may not be the best suited for this position.

Having such an advanced filter where the candidate can search the jobs depending on his/her expertise level in the expected skills may be hard to have as a feature but it is definitely a good feature for job seekers to get a better and more accurate match.

Final words

As a Peerlist user, I know the team is working on a lot of new features and also taking feedback from the users to improve the existing functionalities in the web application. I am also glad that I could have a conversation with one of the founders and get to know some challenges which a startup faces.

If you are not already a member of the Peerlist, go ahead and create one. Thanks to Yogini and Akash for creating such a wonderful social platform. I hope to see the product growing exponentially in the coming days. We are all excited !!!

Practical Git Guide

Sadanand Pai — Fri, 05 Aug 2022 07:45:38 +0000

Practical guide to everyday Git commands

Solutions to 80% of your daily git challenges

I want to clone a project and start going through the code.
I have cloned the repo. But I am not able to see the proper code!!!
Someone has made a few changes in the code and asked me to pull those changes. What should I do?
I have modified the code and added changes. How do I commit my changes?
What if I want only some of my files added and pushed instead of all the changes?
I have modified/formatted some code while going through it. Now I want the code to be back to the state as it was.
I have committed my changes. How can I undo my change?
I have made some changes to the branch. Also, I wanted to pull the new changes. But it is not working.
After applying the stash, I am getting a lot of conflicts in the code.
I have made some code changes. But I want to commit to a new separate branch.
I just committed but forgot to add a few files to the commit. Is there a way to update the same commit with some modifications?
I am asked to raise a Pull Request (PR) to a branch. What am I supposed to do?
I do not want a branch anymore. How can I delete the branch?
I want to rename my local and remote branches. How can I do it?
I have made some changes to the code on the branch on which all of the developers are working. How can I publish my changes?
I created a commit and also pushed it. Is it possible to update that commit now?
I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. I am stuck!!!
I followed the above steps but got conflicts after git pull.
I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. Can I pull the new changes without merging the commit (Rebase)?
I have raised a PR (Pull Request). But it is showing conflicts.
I have many commits. How can I transform them into a single commit (squash)?
I have many commits. How can I transform them into a single commit (squash) with just commands?
I am trying to rebase my branch with the same or another branch. As I have many commits, I am getting a lot of conflicts on every commit to rebase.
I have made changes and committed to a branch. I want to copy the same changes to another branch.
I have tried to cherry-pick as shown in [24]. But I am getting conflicts.
I have multiple commits which I want to move to a different branch.
I have pushed my changes and got it merged. I want to revert it immediately.
How do I reset the code of my branch to the code of a different branch?
I want to delete/undo the previous commit from my branch which I have already pushed. I am not looking for a revert. I just want to delete it.

1. I want to clone a project and start going through the code.

Get the repo URL/link
Open your terminal
Navigate to the location in the terminal where you want your project to be cloned
Enter the command git clone URL

The repo URL can be found inside the repo.

Github repo link example

Bitbucket repo link example

2. I have cloned the repo. But I am not able to see the proper code!!!

By default the main/master branch is active. Ask which branch has the relevant code

Navigate inside the cloned folder cd repo<-name>
Enter the command git checkout <branch-name>

3. Someone has made a few changes in the code and asked me to pull those changes. What should I do?

Pull the changes git pull

4. I have modified the code and added changes. How do I commit my changes?

First stage all the files and then commit your changes. You can create multiple commits.

Stage the files git add *
Commit the changes git commit -m 'Your commit message'

5. What if I want only some of my files added and pushed instead of all the changes?

You can add files by mentioning the file/files with relative or full path. You can add files one by one or multiple files at a time using the commands

Add single file git add <file-path>
Add multiple files git add <file1-path> <file2-path>

Similarly, to unstage a file use the command git reset <file>

6. I have modified/formatted some code while going through it. Now I want the code to be back to the state as it was.

To reset all the changes git reset --hard
To reset a single file git checkout HEAD -- <file-path>

7. I have committed my changes. How can I undo my change?

You can undo the commit by resetting the HEAD. If you just want to undo the commit but let the changes be present then use the soft attribute else if you do want the commit along with the changes then use the hard attribute

git reset --soft HEAD~1 (undo with changes preserved)
git reset --hard HEAD~1 (undo with changes removed)

8. I have made some changes to the branch. Also, I wanted to pull the new changes. But it is not working.

The command git pull may not work if the changes are done by someone else to the same files which you have also modified.

Stash the changes git stash save <name of the change> -u
Pull the changes now git pull
Retrieve the changes git stash apply <n>

where n is the stash number. To get the list of stashes git stash list

Note: You can stash multiple changes and bring them back as and when you like to

9. After applying the stash, I am getting a lot of conflicts in the code.

If there are changes in the code on the region of the stashed code, it is expected to get conflicts. You will have to manually resolve all the conflicts. (Do it carefully)

Below is the view of the VSCode, which helps in easily resolving the conflicts.

10. I have made some code changes. But I want to commit to a new separate branch.

You can create a separate branch out of the current branch and commit it. This works both if you have already made changes or are yet to start making changes.

Create a new branch git checkout -b <my-branch-name>
Stage all the changes git add *
Commit the changes git commit -m "<some commit message>"

To switch between the branches use the command git checkout <original-branch-name>

Note: my-branch-name is your local branch and not available for anyone else unless you push it

11. I just committed but forgot to add a few files to the commit. Is there a way to update the same commit with some modifications?

Yes. You can update the commit by amending your changes.

To add files git add <file-name> <file-name> ...
To update the commit git commit --amend --no-edit

To update with new commit message git commit --amend -m 'My new commit message' (This command can also be used to simply update the previous commit message without any code modifications)

--no-edit is used to avoid the prompt to edit the commit message. If you want to modify the commit message as well during the update of the commit, then do not include -m along with your commit message

Note: The amend updates the previous commit without creating a new one on top of the previous. (in reality, Git discards the previous commit and replaces it with a new commit)

12. I am asked to raise a Pull Request (PR) to a branch. What am I supposed to do?

You can follow the same steps as given in the previous question. Once done you will push the code and raise a PR. It's that simple. Here we assume you are on the 'develop' branch and raising PR to the 'main' branch.

Create a new branch git checkout -b <my-branch-name>
Stage all the changes git add *
Commit the changes git commit -m "<some commit message>"
Push the changes git push (as the branch is not present on the remote, it will show the command to use)
Enter git push --set-upstream origin <my-branch-name>

The URL to raise the PR will be automatically available as shown above. Use the link and open it in the browser.

Now select the base branch to which you want to raise a PR and click on 'Create a PR'

13. I do not want a branch anymore. How can I delete the branch?

To delete a branch locally, check out a different branch than the one you want to delete. Here we will delete the branch named 'develop'

Switch to other branch git checkout <other-branch>
Delete branch git branch -d <branch-name>

To delete the branch from remote as well

Delete remote branch git push -d <remote> <branch-name>

Note: If -d does not allow to delete a branch, use the -D. Example: git branch -D <branch-name>

14. I want to rename my local and remote branches. How can I do it?

To rename a branch, checkout to the branch and rename it.

Check out other branch git checkout <your-branch-name>
Rename your branch git branch -m <new-branch-name>
Push to remote git push <remote> :<your-branch> <new-branch-name>
Set upstream git push <remote> -u <new-branch-name>

<remote> is usually origin

15. I have made some changes to the code on the branch on which all of the developers are working. How can I publish my changes?

To move the changes from your local machine to remote (called origin), follow the below steps in your terminal

Stage the files git add *
Commit the changes git commit -m "<some commit message>"
Push the changes git push

16. I created a commit and also pushed it. Is it possible to update that commit now?

Yes. You can update the commit even after it is pushed. Everything will follow as mentioned in the previous question, but you will have to force push.

git add <file-name> <file-name> ...
git commit --amend --no-edit or git commit --amend
git push -f or git push --force

Note: You need to be very careful while pushing forcefully, as it may eliminate other commits if someone has done in between. Make sure you are working on the branch and no one else is simultaneously working on the same or branching out from the branch at your commit.

17. I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. I am stuck!!!

The rejection could be because the remote branch might be ahead of the local branch. Different techniques can be used here to achieve sync.

Pull the changes git pull
Continue with the merge commit created automatically
git push

If there are conflicts, then resolve them manually to proceed ahead as shown below.

18. I followed the above steps but got conflicts after git pull.

If there are code changes on the same region from multiple commits, conflicts will occur. You need to resolve all the conflicts and proceed.

Resolve all the conflicts
Stage files git add <file-path>
Continue the merge git merge --continue
Push the changes git push

Note: If something goes wrong, in any of the above steps, then there is nothing to panic about. Just run git merge --abort and redo the steps.

19. I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. Can I pull the new changes without merging the commit (Rebase)?

Yes. You can pull the changes without a merge. This is called Rebase. I know you have heard it a lot. It is very simple though.

Pull with rebase git pull --rebase
Push the changes git push

If you get conflicts, then solve all the conflicts. Then

git rebase --continue
Resolve all conflicts
Push the changes git push

Note: If something goes wrong, in any of the above steps, then there is nothing to panic about. Just run git rebase --abort and redo the steps.

20. I have raised a PR (Pull Request). But it is showing conflicts.

PR will show conflicts if the new changes added to the source branch are conflicting with your changes or your branch is lagging.

There are 2 main approaches to solve this.

Merge approach
Rebase approach

Follow any one of the approaches. Don't try both of them.

Assuming that your branch is develop and the source branch is main

Merge approach

Checkout to main branch git checkout main
Pull changes git pull
Checkout to your branch git checkout develop
Merge the changes git merge main
Resolve all the conflicts and add to staging git add <files>
If conflicts are present git merge --continue
Push the changes git push

Rebase approach

Checkout to main branch git checkout main
Pull changes git pull
Checkout to your branch git checkout develop
Rebase the branch git rebase main
Resolve all the conflicts and add to staging git add <files>
Run git rebase --continue after resolving the conflicts
Push the changes git push -f

Note: You may have to run git rebase --continue multiple times if there are multiple conflicts on your multiple commits.

21. I have many commits. How can I transform them into a single commit (squash)?

Converting multiple commits into one is known as Squashing. We will achieve this by rebasing with the help of the interactive feature of the editor (VSCode). This will be both easier and simple.

Run git rebase -i HEAD~<n> (where n refers to the number of commits to squash)
Mark all the commits as 'Squash' except the oldest one
Click on 'Start rebase'
Enter the commit message

Note: If you had already pushed the commits, then you will have to use the command git push -f to reflect squash on the remote branch as well.

22. I have many commits. How can I transform them into a single commit (squash) with just commands?

You can use the technique of undoing to achieve this easily.

Undo the number of commits you need to squash git reset --soft HEAD~<n>
Commit them again git commit -m 'Commit message'

Note: If you had already pushed the commits, then you will have to use the command git push -f to reflect squash on the remote branch as well.

23. I am trying to rebase my branch with the same or another branch. As I have many commits, I am getting a lot of conflicts on every commit to rebase.

You can first squash all commits to one commit (Refer 21).
Once done, rebase the branch and resolve all conflicts in a single go. (Refer 20)

24. I have made changes and committed to a branch. I want to copy the same changes to another branch.

To copy the changes of a commit from one branch to another, you can use cherry pick. First obtain the commit id of the commit, which you want to copy.

Checkout the branch git checkout <destination-branch>
Cherry-pick the commit git cherry-pick <commit-id>

25. I have tried to cherry-pick as shown in 24. But I am getting conflicts.

If you get any conflicts, resolve the conflicts first. Once all the conflicts are resolved, they continue the cherry-pick.

Add resolved files to stage git add <file-paths>
Continue cherry-pick git cherry-pick --continue

Note: If something goes wrong in between, reset the process by using the command git cherry-pick --abort (You can start the process again)

26. I have multiple commits which I want to move to a different branch.

To copy a range of commits from one branch to another, you can note down the older commit id from history and the newer commit id.

Checkout the branch git checkout <destination-branch>
Cherry pick the commit git cherry-pick <old-commit-id>..<new-commit-id>

27. I have pushed my changes and got it merged. I want to revert it immediately.

Revert creates a reverse commit where the changes made will reverse and is created as a new commit. To revert a particular commit first, obtain its commit id.

Revert the commit git revert <commit-id>
Push the commit git push

28. How do I reset the code of my branch to the code of a different branch?

When resetting a branch to a different branch, the codebase on your branch will become the same as the other branch. To achieve this, you can use the 'reset' command.

Checkout to the branch git checkout <your-branch-bame>
Reset with the branch name git reset --hard <source-branch>

In this case, 'your-branch-name' will match the codebase of 'source-branch'

29. I want to delete/undo the previous commit from my branch which I have already pushed. I am not looking for a revert. I just want to delete it.

Revert will reverse the changes creating a new commit. If you want to remove the previous commit, then you can undo and force push the branch.

Reset by undoing git reset --hard HEAD~<n> (n is the number of commits to undo)
Push the changes git push -f

Note: Force push is needed as the history of the branch is changing in this. If the commit is not pushed then it is not needed.

sadanandpai / git-guide

Practical guide to everyday Git commands

Practical Git Guide

Practical guide to everyday Git commands

Solutions to 90% of your daily git challenges

Show your support by giving a ⭐ to this repo

View on GitHub

Git Practical Guide

Sadanand Pai — Mon, 01 Aug 2022 07:32:35 +0000

Hello folks,

I have created a Git Practical Guide which will be helpful for everyone who is facing challenges with Git. This guide covers most of the daily scenarios & challenges with solutions and screenshots.

I hope you find it useful.

sadanandpai / git-guide

Practical guide to everyday Git commands

Practical Git Guide

Practical guide to everyday Git commands

Solutions to 90% of your daily git challenges

Show your support by giving a ⭐ to this repo

View on GitHub

Agile methodology for everyone

Sadanand Pai — Sun, 10 Jul 2022 05:57:22 +0000

Hello folks,

Today, we will be discussing the processes that every software engineer should be aware of, in the world of agile software development. Also, this can be a useful guide if you are a new engineer or an engineer from a non-agile background. We will try to discuss the important yet boring processes that are playing a crucial role in increasing the number of meetings in the engineers day to day work.

Agile

Most of the product development life cycles happening nowadays are using agile methodology. What is agile methodology? At the core, the agile methodology focuses on building the product in parts, feature by feature, and delivering them in multiple stages. Almost opposite of this would be the waterfall methodology which focuses on delivering the product end to end completely without multiple iterations or changes in the requirement.

Earlier, the waterfall methodologies were used majorly. But rapidly changing technologies and customer demands have forced software development to move towards the agile way of working. This is very suitable for working on frequently changing requirements with quicker deliveries.

In this article, we will try to walk through the whole agile process from scratch considering the requirement of building a product.

Requirements

We will try to start with the agile methodology by considering a real-world scenario. Assume we have got a requirement from a person to build a messenger which is nothing other than WhatsApp. Now the person who has given this requirement will be our client for whom we will build the product and he/she/they will be paying us the money in return.

What next?

Now we need to plan a team comprising of developers and testers to build this product. But there has to be a person who can talk to the client on a regular basis to discuss the features, improvements, changes, and progress of the product. So this person can be called a point of contact for the client. Let us give a fancy name to the person Product Owner (PO). Yes, you may have heard it a lot of times.

The requirements to build or modify some product features may not always need to come from the client. The requirements may flow from different directions such as end-users (customers), feature bugs, suggestions within the organization, etc.

The product owner would talk to the client and get the requirements. Also, the clients in most cases will not have technical knowledge. The requirement which comes will not be usually clear. PO will try to transform these abstract ideas into detailed descriptions so that both technical and non-technical people will be able to understand them. In many organizations, there will be a person called Business Analyst (BA), who will handle this.

Why? If the product and requirements are huge and complex, everything cannot be managed well by the Product owners. In such cases, you would require BAs who can clearly write the details of the requirements, acceptance criteria, and other implementation details.

Acceptance criteria is a set of end goals that have to be met in order to confirm that the requirement mentioned is done (also called definition of done). It can be present in the form of a word document or in Jira.

Breaking down the product

Now that the overall requirements of Whatsapp messenger are clear to the Product Owner, the team can start working on building the product. But we are not yet there. The end-to-end completion of requirements may take up to 2 years of time. The client may not spend money and wait for the next 2 years to release it to the customers. The client may expect the product to be released to the customers in the next 3 months.

At this point, it is clearly known to us that we may not be able to complete all the features of 2 years in 3 months, we will have to identify the crucial functionalities and features which the product requires to release to the customers as early as possible. This is called a Minimum Viable Product (MVP).

For a messenger like Whatsapp, the MVP functionality might be

add a phone number to the Whatsapp
ability to send messages to other mobile numbers
provision to add profile details
to store the history of messages
secure way of communication

The MVP design functionalities given above are for demo purposes only. Remember, MVP is not only about building it fast due to time crunch. But also the functionalities which would be added in the future will depend on the feedback received for the initial versions. It is a continuous feedback loop in which the product keeps improving.

What about the other features such as

ability to send media, and voice messages
create a group of multiple people
react to a message
delete the sent messages
add Whatsapp status
Whatsapp web to access outside application

These are also the items to be considered but not immediately for the initial releases. Each of these items is called a Story.

Now to execute/implement these Stories we would require a plan.

SCRUM

One of the famous strategies to execute these stories is SCRUM. Scrum is nothing but a process/framework for developing, delivering, and managing products in a complex environment.

Now that we have the stories with us (either in MVP or others for later releases), we need to start working on those. In Scrum, usually, 2 weeks development cycles are created. This is called a Sprint.

Why Sprint is even needed? With sprint in place, we can plan the tasks for the next 2 weeks and target to complete them by the end. So the planning, execution, and delivery will happen in a regular disciplined manner.

The stories which we want to work on will be picked at the start of the sprint. This is called a Sprint planning meeting in which the sprint tasks are discussed and groomed.

In a sprint out of the above-mentioned functionalities, we might be able to pick 2 to 3 stories (just as an example). These are added to the sprint. All the other stories are called backlogs (stories that are yet to be done in coming sprints). The backlogs are sorted by priority.

The development and testing team will then try to estimate the efforts required to achieve those stories and add the complexity. The complexity of a story can vary from simple to complex. The story points (a measure of complexity) are usually given in terms of Fibonacci values i.e 1, 2, 3, 5, 8, 13, 21. A simple story can be given the lowest complexity and the one which is very complex may carry story points of 21 (defined by the team).

What should be the highest story points that any story in a sprint can have will be decided by the Scrum Master

A Scrum Master is that person who is managing the scrum processes for the team. And anyone in the project can take up this role. Most companies have a dedicated person for this purpose.

Generally, in many companies, the Engineering Manager (EM) plays the role of an SM. A scrum master dedicated to just running the scrum process will not be of great use to the team/company. Hence, companies prefer an engineering manager to take the responsibility of managing the technical and scrum processes together.

Engineering Manager is not just a people manager. An engineering manager is responsible for ensuring that key projects and engineering duties are fulfilled along with solving the engineering challenges in the project.

As a part of the scrum, there has to be a daily meeting to update the status of the stories. This meeting is popularly known as "Daily standup". The words used literally mean it. All the people of the team will come to a meeting room and stand up while giving their updates. This meeting is also called a Scrum Call.

What happens in this meeting? Everyone will have to share their updates generally in the below format

What did I work on yesterday?
What am I working on today?
What issues are blocking me?

After completion of 1st week, the sprint review takes place. Here we will analyze the status of the stories and tasks again. This meeting is more of a discussion on aligning the sprint to take ahead and complete as planned as well as to have a walk-through of the work completed in the 1st half of the sprint.

In the 2nd half of the sprint i.e 2nd week, the team will try to target the stories towards completion. For developers and testers, this mainly involves testing the implementation, raising the defects, fixing them, and getting it ready for deployment.

Assuming everything went as expected, the new development/progress done towards the product will either be released to the customers or shared with the client. The sprint will conclude with a Sprint retrospective meeting.

Sprint retro is a meeting that involves a discussion on how did the overall sprint execute, what went right during the sprint, what could be improved and how we could have done it differently to make things efficient for the future.

Takeaway

Now that we have understood the flow of the development process in agile methodology, it should be clear to us about the different roles which have come into existence such as SM, EM, BA, and PO.

The processes mentioned may not be exactly the same in all the companies. Development teams may prefer the modification in the scrum process which works best for them. Though these are some kind of the commonly followed guidelines, at the end of the day the process that yields the best results will only be preferred.

This article may just serve the purpose of introducing the processes at a high level. There are well-written articles and guides on the Agile processes which you can find over the web. Next time you hear about Agile or Scrum, hope you will not be puzzled.

Sudoku Solver using SolidJS & Tailwind

Sadanand Pai — Sat, 12 Mar 2022 08:14:37 +0000

Hello folks,

I have developed "Sudoku Solver" using SolidJS and TailwindCSS. It tries to solve the given input board using backtracking to get a solution.

Link: https://sadanandpai.github.io/sudoku-solver/dist/
Repo: https://github.com/sadanandpai/sudoku-solver

It is written in a simple way for anyone understand and build similar things.

2022 Frontend Development interview checklist & Roadmap

Sadanand Pai — Sat, 25 Dec 2021 09:25:57 +0000

Hello folks,

I have created the Frontend Development #interview checklist and Roadmap for 2022.

Hope you find it helpful.

PDF link

My journey from QA to Frontend Development

Sadanand Pai — Fri, 17 Dec 2021 05:25:56 +0000

Hello folks,

I am very much excited to share my career journey, on how I moved to development after six years of testing experience. Also, I will cover my preparation strategy, in brief, to motivate & inspire those who are on this similar path.

Campus placement (A little bit about my background)

I did my Bachelor of Engineering in Electronics & Communication from a college that most refer to as TIER 3 college. I did not even attempt for any of the core companies in my final year. Like the most, I appeared for the mass recruiting companies and fortunately got an opportunity at Infosys Ltd. After the completion of my education, I had to wait for eight months to be onboarded at Infosys as they postponed the joining dates by a few months. Mine was among the first few batches to whom online training was introduced by Infosys.

I started my career journey with Infosys, Mysore as a trainee engineer in the second month of 2013. I was trained in Java, SQL & a few more computer science topics. These helped me to understand the basics of the software development life cycle.

Career as a QA

After completing training, I started working at Infosys, Mangalore as a Test engineer (Quality assurance engineer). The project was in the apple account, and we were working in an offshore development center (ODC) at Infosys. My work expectations were to understand the requirements, write the test cases, execute them, raise the bugs, & so on. It continued for a few more years in different domains (retail, manufacturing, etc.), which offered me some knowledge of these domains too.

By the time I understood what was going on, it was already mid of 2016. With such an experience, my typing and excel skills had improved a lot. As these skills were nowhere in demand, I decided to move to Silicon Valley of India, Bengaluru. I got the opportunity to work at the client location Huawei from Infosys. Here I got some exposure to coding on automation testing (Java + Selenium). At the end of 2017, I decided to make at least some progress in my career.

I joined Sears Holdings as a senior test engineer. The company faced an unexpected challenge within a few weeks of my joining. They decided to lay off employees. Being the recent joiner, I was at the top of the list. My 2nd company did not even add two months to my resume.

As I was jobless, many companies were strategically trying to hire me at discounts. Fortunately, I got an offer from TEKSystems to work for Schneider Electric. I started working as a test engineer on core authentication and authorization integration software product.

What made me change my mind !!!

I started exploring different tools and technologies in the testing domain; Performance testing, Automation testing, API testing, Robotic Process Automation. Also, I evaluated my long-term career possibilities in the domain which was either Test Manager or Test Architect. Scrum Master is another option that I was not interested in. As I was not convinced with the options I have, I decided to move out of the testing domain. (personal choice, no offense intended)

I talked to many developers and took their suggestions regarding the same. But many were skeptical about the chances of getting a decent development opportunity after five-plus years of testing experience. After spending a month evaluating all the possibilities, I decided to start my studies to become a developer. (Better late than never)

Now the question remaining was about the tech stack. I picked frontend development. The reasons for choosing frontend were

Frontend development was booming with frameworks such as React, Angular during 2018
We can quickly see the results of what we code
Entry barrier is lower compared to backend dev, machine learning
Good number of books and materials to study from
JavaScript is everywhere (backend, frontend, mobile, ML, AI, ...)

However, there are fewer materials for intermediate and advanced levels (frontend system design, architecture, WASM, ...)

Frontend preparation 👨‍💻

As I already had some exposure to HTML, CSS, and JavaScript, web development was not something alien to me. I created a roadmap for myself for the next four months. It included 80% of JavaScript and 20% of HTML & CSS. I chose You don't know JS for JavaScript and Maximilian courses from Udemy for the rest.

A roadmap is a step-by-step guide that helps us to plan our learning. It is very important to create a roadmap for our needs and goals. It also helps us to be focused on our goals and track our progress.

Regularly, I spent 3 hours studying JavaScript after my office hours. I was mainly reliant on the book and a few video courses (Udemy, Youtube) for additional information. On weekends I used to spend 12 to 16 hours. Was it easy? Of course not. It was damn hard for me. I was frequently getting demotivated; I wasn't able to complete even a single topic in a whole day sometimes; sometimes I did not even feel like opening the laptop and practicing; I had to push myself in the evening after the hectic day 😦. However, the studies continued for about three months. The next one month I spent on HTML and CSS.

Now it was time for frameworks. Yeaaaa 🕺!!! The most awaited one. Considering the market demands, I had to choose either React or Angular. I started with AngularJS 1.7, building a project. Neither video tutorials nor books; created a project with only its documentation. WoW moment for me. I was able to build and host the project on my own. Now it was the time for React 😎. I converted the same project into React.

As AngularJS was outdated, I had to learn Angular. I knew AngularJS was outdated, and it was international to practice it first before moving to Angular. I figured out a practical challenge that our testing team was facing in the daily work. Solving it using a web application would both make the life of testers simple and also give me a real-time frontend project experience. I built a small frontend project in a few weeks, using Angular. My teammates loved it as it reduced the manual effort by 90%. Now I had one good frontend project to showcase in my resume.

Frontend interviews

As it was already five months from the day I started learning frontend development, I was in a position to start giving the interviews. It was the 1st month of 2019. I updated my resume with the relevant frontend details & projects and activated my job search through Naukri and Linkedin.

I was overwhelmed with the number of interview calls I got. It was not because of my knowledge but purely due to the demand. Few interviews were scheduled for the same weekends after the initial telephonic round. I cleared all the interview rounds at Trelleborg and got my first offer as a frontend developer 🎊 🎉 🎆. I was ecstatic. I was satisfied with the UI developer role at Trelleborg and happily accepted the offer immediately. Also, I could clear the interviews at Tredence and Pearson. My job search ended successfully in a short span of 4-5 days which I had never imagined.

Frontend journey till today

Trelleborg helped me to get a lot of frontend experience as a beginner and gave me exposure to different frameworks. I worked on legacy codebase as well as modern codebases. I developed projects from scratch as well as handled maintenance projects. I added enhancements to the products as well as architected the projects. From building applications with complex logic to pixel-perfect user interfaces, I was involved.

After 1 year at Trelleborg, due to covid most of us started working from home. I tried to utilize this time to enhance my core skills. I focused more on HTML & CSS part this time as I was not proficient enough. I also strengthened my problem-solving skills by practicing data structures and algorithms. I started building multiple personal projects and started sharing my knowledge over Github. I became an active member in various frontend communities. Also, I started actively attending and giving sessions on frontend-related topics. During this time, I connected well with an open frontend community called TeamDevkode which helped me to grow in the frontend world and gave me the required exposure.

By then it was 2021. To try out newer challenges, to grow faster 🚀🚀🚀 in my career, I decided to explore the opportunities in the frontend domain. I moved to CoinDCX as a frontend developer in the 1st week of April 2021.

To read more about my interview experience at CoinDCX, click here.

Conclusion

When I see my career transition journey, it makes me feel happy. Now I enjoy being a frontend developer that I aspired to be in my past. It makes me feel like an achiever (though not huge). It helps me to empathize with the feelings of those, who are striving hard for the same. At the same time, it also makes me realize that I am still a beginner and, there is a long way to go.

I did not do it alone. l am grateful to all those who guided, helped, and morally supported me. I hardly spent money on resources as most of the high-quality resources were available online for free. Thanks to open-source materials, projects, tools, and free youtube channels.

However, one question was bugging me a lot during my preparation phase. "What if I fail?" The worst thing that can happen is, I gain a good amount of knowledge on something. It is better to try and fail than never to try at all.

An investment in knowledge pays the best interest - Franklin

I hope my journey motivates you and ignites that fire 🔥 to excel at the things you are wishing.

Frontend interview experience at CoinDCX

Sadanand Pai — Sat, 27 Nov 2021 03:34:44 +0000

Hello folks,

I am glad that I am a part of CoinDCX organization now and got the opportunity to make crypto accessible to millions. In this post, I would like to share my interview experience at CoinDCX.

How did I apply

I was invited to a job search platform called Enthire via Linkedin by a Talent Acquisition Lead. It's a platform that helps candidates to get fast-tracked opportunities with verified employers by giving interviews with their Industry Experts. Depending on these interview results, Enthire recommends and helps us to apply for good opportunities on their platform.

Interview at Enthire - JS and DSA (45 mins)

Enthire conducted a generic frontend interview round that was focused on core JavaScript and DSA (data structures & algorithms). The difficulty level of questions on JavaScript was intermediate to advanced. The difficulty level of questions on DSA was beginner to intermediate.
I got a good rating ★★★★☆ in this interview round which allowed me to apply for CoinDCX.

Round 1 at CoinDCX - Assessment (1 hour)

My resume got shortlisted by CoinDCX and 1st round of assessment was scheduled. This was a multiple-choice quiz. Questions covered both frontend (HTML, CSS, JS, Angular) and aptitude. Many of the questions were tricky and challenging due to the time limits.

Round 2 at CoinDCX - System Design (45 mins)

The system design interview round started with a discussion on my core skills and framework knowledge. I was given a large component of the CoinDCX web application and was asked to design the system. I started by clarifying all my doubts and explaining my approach. Once I got the approval for the approach, I proceeded by breaking down this complex system into components. I explained the design of each component and finally the interaction & integration of the components to build the whole system.

I was then asked to code the logic for one of the components of this complex system in JavaScript. I explained the logic and coded the core functionality.

Round 3 at CoinDCX - Live coding round (1 hour)

The live coding interview round started with a few of the advanced questions on JavaScript concepts. As I was more comfortable coding React than Angular, I was asked to code a small component using React by sharing my screen. Once I came with the functional code, many more complicated scenarios were introduced to the same component. As Angular is the technology being used at CoinDCX I was given a new problem to code using Angular. Similar to the previous challenge, variations were introduced progressively.

Once the live coding session was over, many advanced questions were asked on JavaScript, CSS, and Angular framework.

Round 4 at CoinDCX - Cultural fit (1 hour)

The cultural fit interview round started with a few behavioral questions. Then there was a dedicated question on studying and coming up with a practical solution for a real-world problem (non-technical). It was more like a brainstorming discussion with no specific right answer. The rest of the 30 mins were focused on the responsibilities I was taking care of previously and more on the processes.

Results

After a few days, I got to know from HR that I got selected. The whole interview process was super smooth and the interviewers were also highly knowledgeable. Fortunately, I was offered Senior Software development engineer (SDE2) at CoinDCX and happily accepted the offer.

I joined CoinDCX in the 1st week of April 2021 and so far my experience at CoinDCX is awesome. I wish to see my knowledge and career grow at CoinDCX similar to the price of ₿ bitcoin 📈 in recent years.

To know more about the frontend resources and frontend interview preparation, please visit Frontend Learning Kit which is a generic guide to crack interviews of any company for the role of frontend development.

Other opportunities

I had cleared the interviews at Byjus, MediaMonks, Glowroad, ORMAE, PhiGRC, SkillExchange, & Aroha and was rejected at Flipkart & Typeset. I had also applied for frontend roles at CureFit, FireEye, Amazon, Razorpay, Acko, Publicis Sapient, & MEX where my resume was either not shortlisted or never heard back.

I did not try to go through referrals for any of the companies in my job search process and utilized only the freely available platforms.

If you wish to be a part of CoinDCX and if you think you have the right skill set, then please visit Careers @ CoinDCX

Frontend Learning Kit

Sadanand Pai — Wed, 08 Sep 2021 10:55:29 +0000

Hi folks,

In order to help everyone, I have listed down a few of the best materials (books + videos) for frontend developers all in one place (most of which I am referring to and planning to complete).

Hope this helps you to learn & master the frontend without depending on others much.

Repo: https://github.com/sadanandpai/frontend-learning-kit

Path Finding Visualizer

Sadanand Pai — Mon, 16 Aug 2021 12:50:32 +0000

The project is developed to help visualize and learn the Breadth First Search algorithm in finding the shortest path between source and destination with obstacles.

Also the code is written in a simple way to help interested folks, build the similar projects.

Link: https://sadanandpai.github.io/shortest-path-finder/dist/

Repo: https://github.com/sadanandpai/shortest-path-finder

Forem: Sadanand Pai

DSA for Frontend devs

What is DSA

How does DSA help a programmer?

Importance of DSA

Where the hell is DSA?

DSA for interviews

Is DSA needed for Frontend developers?

Conclusion

High-quality resources for frontend web devs

High-quality resources that every frontend web dev should be aware of

Peerlist: A simple but powerful portfolio

Developer portfolio

Resume

Jobs

What can be different?

Final words

Practical Git Guide

Practical guide to everyday Git commands

Solutions to 80% of your daily git challenges

Contents

1. I want to clone a project and start going through the code.

2. I have cloned the repo. But I am not able to see the proper code!!!

3. Someone has made a few changes in the code and asked me to pull those changes. What should I do?

4. I have modified the code and added changes. How do I commit my changes?

5. What if I want only some of my files added and pushed instead of all the changes?

6. I have modified/formatted some code while going through it. Now I want the code to be back to the state as it was.

7. I have committed my changes. How can I undo my change?

8. I have made some changes to the branch. Also, I wanted to pull the new changes. But it is not working.

9. After applying the stash, I am getting a lot of conflicts in the code.

10. I have made some code changes. But I want to commit to a new separate branch.

11. I just committed but forgot to add a few files to the commit. Is there a way to update the same commit with some modifications?

12. I am asked to raise a Pull Request (PR) to a branch. What am I supposed to do?

13. I do not want a branch anymore. How can I delete the branch?

14. I want to rename my local and remote branches. How can I do it?

15. I have made some changes to the code on the branch on which all of the developers are working. How can I publish my changes?

16. I created a commit and also pushed it. Is it possible to update that commit now?

17. I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. I am stuck!!!

18. I followed the above steps but got conflicts after git pull.

19. I have created single/multiple commits. When I am trying to push my changes, getting a rejected message. Can I pull the new changes without merging the commit (Rebase)?

20. I have raised a PR (Pull Request). But it is showing conflicts.

Merge approach

Rebase approach

21. I have many commits. How can I transform them into a single commit (squash)?

22. I have many commits. How can I transform them into a single commit (squash) with just commands?

23. I am trying to rebase my branch with the same or another branch. As I have many commits, I am getting a lot of conflicts on every commit to rebase.

24. I have made changes and committed to a branch. I want to copy the same changes to another branch.

25. I have tried to cherry-pick as shown in 24. But I am getting conflicts.

26. I have multiple commits which I want to move to a different branch.

27. I have pushed my changes and got it merged. I want to revert it immediately.

28. How do I reset the code of my branch to the code of a different branch?

29. I want to delete/undo the previous commit from my branch which I have already pushed. I am not looking for a revert. I just want to delete it.

sadanandpai / git-guide

Practical guide to everyday Git commands

Practical Git Guide

Practical guide to everyday Git commands

Solutions to 90% of your daily git challenges

Contents

Git Practical Guide

sadanandpai / git-guide

Practical guide to everyday Git commands

Practical Git Guide

Practical guide to everyday Git commands

Solutions to 90% of your daily git challenges

Contents

Agile methodology for everyone

Agile

Requirements

Breaking down the product

SCRUM

Takeaway

Sudoku Solver using SolidJS & Tailwind

2022 Frontend Development interview checklist & Roadmap

My journey from QA to Frontend Development

Frontend interview experience at CoinDCX

Frontend Learning Kit

Path Finding Visualizer