DEV Community: sridhar02

My 2023: A Year of Challenges and Triumphs

sridhar02 — Tue, 02 Jan 2024 19:24:16 +0000

2023 has been a rollercoaster ride for me. I faced a layoff early in the year from my last company, Hootboard, but bounced back and joined Amazon. Even though it is a contract role, it was the best decision I made. I traveled to the React Nexus conference with Zubair in July and after the conference trekked to Skandagiri Hills. Completing the trek was challenging, but with persistence and the help of others, I succeeded. I also visited Anthargiri Hills in September with Nomadic Gurukul, which was a fantastic experience.

Work:

Experienced a layoff in February from Hootboard.
Joined Amazon MiniTV in April.
Worked on a large codebase at Amazon, improving SEO performance by correcting headers, meta descriptions, and adding footer links.
Also learned HTTP status redirections 301 & 302.
Also learned how server-driven UI will make your app load faster & configure every section from the backend.
Key learnings at Amazon:
- The importance of thorough code documentation.
- The a need for well-structured documentation when proposing ideas to the team, including a comparative analysis of libraries, along with their advantages, drawbacks, and recommended approaches.
- The significance of writing effective Product Requirement Documents (PRDs).

Outside Work:

Initially felt discouraged after the layoff, grappling with doubt fullness. However, in hindsight, it was the best thing that happened to me this year, considering the accomplishments I achieved thereafter.
Attended the React Nexus conference in July with Zubair & met great people at the conference.
Successfully trekked Skandagiri Hills. Although challenging due to my fitness level, I was supported by trek friends to the top. This was my second trek, following a previous one to Kudurumuka with another friend Nava in 2022.
Met many incredible people at React Nexus, including Vivek from ARC Browser & Tejas.
Purchased an M1 MacBook and an iPhone for personal use.
Learned swimming during the summer.
Also did an aerial yoga workshop along with my brother, hopefully, next year want to try scuba driving in Andaman or some other place.
Attended numerous meetups in Hyderabad. Notable ones include Web, Cloud & Go Multi-Track DevDays at IIIT Hyderabad, AI & ML Multi-Track event at ServiceNow, and a Temporal meetup at Microsoft.

I also wanted to write my experiences of meetups & conferences, I will try to do it after this blog. If you have read till the end, consider writing your own retrospective and sharing it

Some more year in reviews you may like to read & which inspired me to write my own

Cracking the Code: My Senior Software Engineer Interview Experience at Codecademy

sridhar02 — Mon, 16 Oct 2023 19:18:18 +0000

This is my interview experience at Codecademy, I want this to be a guide for others that could help others ace their interviews at product companies.

Company Info

Website: https://www.codecademy.com/
Location: Remote
Process for Role: Senior Software Engineer - Labs
Job Role Link: https://www.codecademy.com/about/job/4278254005
Status: Not Selected

Interview Process Summary


Rounds	7
Scripted Questions?	No
Typical DS and Algo Questions?	No
Live Coding?	Yes
Asked Current CTC?	Yes

Rounds Description

1. Codecademy Recruiter Screen:

In this round, you will converse with the Hiring Recruiter. You will be asked about yourself, your current place of employment, your reasons for seeking a new opportunity, your current CTC, and your expected CTC. The recruiter will then provide further details about the role for which you have applied.

2.Hiring manager Screen:

In this round, you will speak with the technical hiring manager about the role. You will need to discuss your past work experiences, highlight specific projects, and describe what you are seeking in your next position.

3.Frontend Take Home Assignment:

In this round, you will receive a CodeSandbox link containing a readme.md file with instructions for the front-end coding exercise, which will be closely related to a business use case. You will have 5 to 6 days to submit your solution. If you require additional time, you may request an extension.

4.Backend Coding Exercise:

In this round, you will be tested on your backend knowledge, specifically concerning HTTP request/response dynamics and other core backend-related topics. This round will primarily focus on real use cases that arise in Codecademy. Concentrate more on backend basics concepts don't think too complex. Please try to complete the coding before the time limit.

5.Take Home Assignment Review:

In this round, you will provide an outline of the code you wrote for the take-home assignment. Following that, you will be asked about potential improvements in your solution, possible UI enhancements, and data flow optimizations. Additionally, you will face some questions based on the specifics of the project.

6.Frontend Design & Architecture:

In this round, you will be asked to use Excalidraw to examine various UI screens from Codecademy. Dive deep into each screen to identify common components, local states, API call request/response structures, and server-side states. Endeavor to explore in detail. In excalidraw mark common components & write the json responses as much as possible. Ask as many questions as necessary to thoroughly understand the requirements for the UI.

Failed in this Round.

7.Hiring Manager Interview:

In this round, you will be asked about the company's core values, which include teamwork, feedback, transparency, and evolution. Please focus primarily on the Engineering Values matrix. Additionally, reflect on your past work, especially instances where you took the initiative to improve the codebase or user experiences. Discuss how you managed deadlines and how you overcame challenges faced while implementing new features.

Overall Experience

I had a very good Interview experience at Codecademy, recruiter was very kind and assisted in answering all the questions I had before the interview. They also clarified what was expected of me in each round. The coding questions asked ranged from easy to moderate, and each interview focused on business use cases. If you have a strong foundation in the fundamentals of JavaScript and React, you should be able to tackle them with ease.

Resources/Tips

A similar interview process by Codecademy recruiter
Make sure you try to give your best in each & every round possible.

I would like to tell people to start sharing their interview experiences to order using these platforms so that it would help others to ace their interviews. If you want some kind of template to document this then use this template & refer to this awesome-interview-experinces-repo. For blog cover credits go to Coverview

If you need more info regarding this article or anything related to tech or software engineering in general, drop a comment here or you can message me here ksridhar02

What is clamp function in CSS?

sridhar02 — Thu, 15 Oct 2020 07:29:03 +0000

Hi everyone, today I going to explain the importance of an inbuilt CSS function called clamp() which can be used most of the time in building responsive web pages without the need of media queries.

What is a clamp function?

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum.

While it’s a related idea to min() and max() it is different in specific ways:

Order matters
It only takes 3 parameters
Those 3 parameters are

1.The minimum

2.The target value (ideally a relative unit)

3.The maximum

General syntax for clamp clamp(MIN,VAL,MAX)
clamp() can be used for any of the following data types:

Clamp function in action:

Font size control using a clamp() with using a single media query

Clamp() for controlling Image width

Resources:

Mozilla Docs

If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter @ksridhar02.

What is Mixed content block and how can we create a proxy server?

sridhar02 — Fri, 18 Sep 2020 19:53:27 +0000

Hi everyone, recently I have encountered a problem when working on a react project. I created the project with a basic login and a dashboard page. I have deployed it to Heroku, now started to test in my browser visiting the URL and entering the login credentials there got an error alert on my login screen then went to developer tools and checked what is the error in the network tab.

I got these two errors in dev tools saying mixed content block restricted.

Network tab errors

Browser console errors

Now I began to wonder what is a mixed content block, I have never encountered it till now, so began to search what is it in MDN as it is the best where can find answers about any issue related to web applications. I will explain the gist of it now.
What is Mixed content block?

When a user visits a page served over HTTPS, their connection with the webserver is encrypted with TLS and is therefore safeguarded from most sniffers and man-in-the-middle attacks. An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. That leaves the pages unsafe.

There are two types of mixed content blocks here :

1.Mixed passive/display content:

Mixed passive/display content is content served over HTTP that is included in an HTTPS webpage, but that cannot alter other portions of the webpage.

Passive content list

This section lists all types of HTTP requests which are considered passive content:

<img>(src attribute)
<audio>(src attribute)
<video>(src attribute)
<object>subresources (when an performs HTTP requests)

2.Mixed active content:

Mixed active content is content that has access to all or parts of the Document Object Model of the HTTPS page. This type of mixed content can alter the behavior of the HTTPS page and potentially steal sensitive data from the user. Hence, in addition to the risks described for mixed display content above, mixed active content is vulnerable to a few other attack vectors.

Active content examples

This section lists some types of HTTP requests which are considered active content:

<script>(src attribute)
<link>(href attribute) (this includes CSS stylesheets)
<iframe>(src attribute)
XMLHttpRequest requests
fetch() requests
All cases in CSS where a <url> value is used (@font-face,cursor, background-image, and so forth).
<object>(data attribute)
Navigator.sendBeacon (url attribute)

Here I got problem mainly due to my backend server having HTTP IP Adress and the browser is blocking the HTTP calls due to MIxed content.

For this type of errors, we can create a proxy for our IP address. Now what happens is we make a request from the browser it calls our HTTPS proxy address that in turn calls an HTTP address. This works perfectly because the browser will only know that we are calling HTTPS to HTTPS it won't know the other HTTP call we are making from the proxy server.

Now we can create a simple proxy server using these
create a package.json using npm init command
Now install an npm package called http-proxy npm package.
create a server.js file write the following code

const http = require("http");
const httpProxy = require("http-proxy");

const PORT = process.env.PORT || 8080;
httpProxy.createProxyServer({ target: "http://139.XX.0.96:XXX" }).listen(PORT);

Now run the server using node server.js.
Now our proxy server is ready. we can request any type of request from our local to sever to the HTTP server.
we can deploy either in AWS or Heroku or any other platform. we can use that server IP to call our HTTP address.

References

MDN Docs links:

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

NPM package link :

https://www.npmjs.com/package/http-proxy

If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter @ksridhar02.

How to setup the Integration of LinkedIn API with OAuth?

sridhar02 — Tue, 08 Sep 2020 02:01:01 +0000

Hi everyone, I have recently worked on a project where we need to sync the user data using linkedIn, so to set up a sign in via LinkedIn I visited the LinkedIn developer documentation but there are no clear instructions, so I want the explain how can you set up easy login or sync user data through LinkedIn API.

Many of us may have encountered on different websites, where you can log in with Facebook, Github, Google, and LinkedIn. These are operations are called the OAuth authorization setup. They are very similar to each other and everyone follows the same way. so now I going to explain setting up OAuth with linkedIn. This is the OAuth flow for the application

Steps:

Visit the LinkedIn developers website from your profile and now you will be able to see a create app button on the main page click on it.

After clicking on the page you will be able to see this page where you need to specify the app name, you have to enter the LinkedIn page name of the company which you will be associating the with the application you are building, enter any Privacy policy URL for your associated application, upload the company logo and create the application.

After that, you will be given a client id and client secret which we will be using later in your application in the Auth tab of the next page, here you also need to specify the redirect URL, which will be used to redirect to your application after login.

Now the main step is to get the data required for your application, for this, you need to have access to the user profile scopes such as r_basicprofile,r_fullprofile, and r_emailaddress, these are field which you will be able to access from the LinkedIn API which will be added based on the products you add in your application

Now you need to configure the products for your application, the image below you need to select sign in with LinkedIn product so that u will get the basic profile and email address from the logged-in user. If you need to get all the user-related education, any other you need to set up other products or you need to apply for the different partnership programs with LinkedIn to get the user full details.

I have added the sign in with the LinkedIn product for my application which will get me r_liteprofile and r_emailaddress in your scopes.

I have created a react application with Nextjs and serverless functions for this use case. This is the sample website. I have created which will get you your profile name and profile picture.

References:

LinkedIn developers URL: https://www.linkedin.com/developers/

Repo Link: https://github.com/sridhar02/LinkedIn-OAuth-example

sample website link: https://linkedin-oauth-example.vercel.app/

LinkedIn Documentation : https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/compliance/context

If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter @ksridhar02.

From Petroleum Engineering to Software Eng?

sridhar02 — Mon, 10 Aug 2020 14:31:44 +0000

Hi everyone, I hope everyone is fine in these uncertain times, today in this post I am going to explain how I changed my career path after my of graduation of B.Tech from Petroleum engineering.

I am just a regular guy who thought of engineering is a great option after my intermediate education, but after 4 years realized that it is just a degree. So right after my graduation, I realized my interest in software, so I have started to learn the software with the help of my brother who is already a remote software developer.
My journey in software started with learning a simple language called Golang, which is very to pick up and understand easily it is similar to C language.After understanding the basics of the Golang,then I am came across this best resource called FreeCodeCamp with a curriculum , so i followed the curriculum with learning the HTML,CSS,JavaScript,ReactJS with practice and reading the documentation in MDN and official React documentation.
Learning the languages alone wouldn't help anyone so I started to build personal projects with Reactjs and Golang. My first project was to clone Github functionality as much as possible. I have used Nextjs for the frontend development, Golang for the backend API's and Postgres as a database, which is called issue-tracker and similarly I built my second project which is Flipkart clone with the same stack with some basic functionality which is called ecommerce.
The whole process took me a minimum of 6 months of time, a serious amount to concentration and hard work, so I started applying to companies which my knowledge after a long search for a job. Finally, a first success came to me in terms of a Job in Cambridge Technologies, Hyderabad as JavaScript developer in January.
First Job experience, I was very excited to work in the software industry as of now I am a self-learned software developer. I worked on a web application for the construction domain for a US-based Client with a great team. As everything was going good then a sudden disappointing surprise came to me as COVID hit the world and the construction domain was greatly effected, so the client was in huge losses, I was in my probation period and I have been laid off at the end of April. It was a great journey from Jan to April and 4 months of a great experience.
I was bit little disappointed but everyone is affected by corona, so I have to keep moving for my self, later in May and June, I have applied to a couple of jobs, I was able to clear the interviews in some companies, but they are not great and not the companies I was eager to work so rejected some offers, in the meantime, I explored technologies like Graphql, React Native and did some personal projects using them. At the end of June, I realized that I was wasting a lot of time applying to jobs and doing the test but not learning anything from them so thought of taking a break from applying to jobs and to work on any open-source which would help me to gain some experience.
In July I started to work on an open-source project called mattermost. It is an alternative to slack. I started to look into the project and picked a few issues. At first, I was unable to solve the simple issue, It was harder because the codebase was huge, I was unable to understand, after many up and downs with help of matter most team and community I was able to submit my first PR and got it merged. At the end of July, I was working on 4 to 5 issues which are a bit difficult but I kept pushing my limits and some of the issues got merged. I have gained a good amount of experience working on a huge codebase.

Conclusion:

My goal was to settle in a Product based company as a remote developer and to work on a modern stack. I hope to find a good job in the coming future in a month or two. In the meantime, I am going to work a lot more harder on my self and work on opens Sorce projects to gain experience.

Things to remember:

Keep Working Hard until you find your success and keep pushing yourself.
Software is not Hard, anyone can learn and get a job in software but you have to work hard and practice a lot not watching videos tutorials.
Learn with passion and interest, anything is possible.
Everyone will struggle and fumble while learning but don't ever give up, keep pushing yourself.

I think this a big article but it would be an inspiration to someone who just started to code or is struggling to learn the software. Anyone wanted to connect with me feel free to ping me by any method and feel free to comment on your views to this post.

Setting up SSH for Github in Linux

sridhar02 — Fri, 07 Aug 2020 03:04:10 +0000

The developer's most used tool was Github, so every time you push your changes you will be asked to enter your Github details which is a tiresome work so setting an ssh key to your Github will make your life a lot easier.

Through the following commands you can easily setup ssh for GitHub in Linux

Open Your terminal and set the following

git config --global user. name 'Your GitHub username'
git config --global user.email 'your GitHub associated email'

After this step check if you have any SSH keys present locally by this commad.

ls ~/.ssh

Now you have to generate ssh key in your terminal with the following command and click as enter for all the options as default values willl be enough for creating a ssh key

ssh -keygen -t rsa -b 4096 -c 'your Github associated email address'

Now you have to copy the ssh and paste it in your github ssh settings, we can copy the ssh key easily using xclip.
First install XCLIP through the following command

sudo apt-get install xclip

Now copy your ssh key using xclip by this command

xclip -sel clip < ~/.ssh/id_rsa.pub

Now open your GitHub account in the browser go to settings and select SSH and GPG Keys from the left sidebar.
Now Click New SSH Key button.
Now enter Your title and enter the copied ssh key from earlier.

Now open your terminal and Check the ssh key using this command.

ssh -T git@github.com

After this, you will be prompted with this text

Hi Username! You've successfully authenticated, but Github does not support shell access.

Refernce

If you are struck anywhere, please refer to this video tutorial https://www.youtube.com/watch?v=HfTXHrWMGVY.

Conclusion

Please try to use SSH for GitHub as it makes a life a lot easier and secure. If you are struck anywhere feel free to comment below I can help you to set up or some can help with your problem.

Best React Tutorial

sridhar02 — Thu, 04 Jun 2020 06:59:57 +0000

Hi, everyone hopes everyone is doing fine. I am a junior react developer, recently I wanted to polish my skills in react so I took a course from egghead.io that is The Beginner's Guide to React by kentcdodds.

In this blog post, I wanted to explain some of the things, that I have learned from the course. I think everyone has to try this course it is completely free. Don't think this course for beginners only everyone can learn a lot from this course.

The Beginner's Guide to React course link

Using React Error Boundaries to handle errors in React Components
Lifting and colocating React State
React Hooks
Install and use React DevTools
Build and deploy a React Application with Codesandbox, GitHub, and Netlify
Handle HTTP Errors with React
Use a lazy initializer with useState
Manipulate the DOM with React refs
Create reusable custom hooks
Manage side-effects in a React Component with the useEffect hook

GitHub repo of the course

If you find any topic interesting go and learn it from the course. In my next blog, I will explain a topic with decent code examples.

My personal portfolio site. Some feeback / tips?

sridhar02 — Sun, 03 May 2020 09:02:23 +0000

I have recently created by web portfolio, it is not responsive suitable for desktops ,can any one review it and help me to prefect it,so that I can use it for my job interviews.
Web portfolio link

Thanks in advance