DEV Community: Parth Bhardwaj

Side Projects as Learning Tools: How I learn new tech

Parth Bhardwaj — Fri, 01 Sep 2023 12:38:40 +0000

As a budding developer, side projects have become my invaluable companions on this learning journey, providing a beginner-friendly way to experiment with and understand new technologies.

I've been there, navigating through countless tutorials and online courses, feeling like I'm stuck in what's often referred to as tutorial hell.

This can be frustrating for devs who feel overwhelmed and unsure of how to take the next step in their learning journey. In this blog, I want to share how I'm using side projects to learn new technologies.

Setting specific learning goals

Before I start working on my project, I set specific learning goals for myself.

What new technology or skill do I want to learn?
How will I measure my progress?

When Next.js 13 was released, it brought major new changes in app routing patterns, improved layouts, react server components, streaming and many more.

So I set my goal to learn and try out these new released features from Next.js 13 in my next side project.

Setting clear goals will help keep me focused and give a sense of accomplishment as I work towards them.

Choosing a project that interests me

I try to choose a project that I am excited about ( maybe fun game or any productivity tool).

When you're working on something that you find interesting, you're more likely to stay motivated and you'll be more likely to put in the time and effort to learn new skills.

I choose a project where I can accommodate as much features/tools of the tech I want to learn as I can though not over-killing it, application of each feature/tool should be reasonable (If someone asks why have I used server components instead of client-side component, I should be able to answer that.)

This gives me a wide view of what features the new technology is providing and how to use them.

Documenting my learnings

While implementing the project, I simultaneously document my learnings (currently I maintain them in my notion docs, but I will be starting to blog about them and share my learnings and insight with other).This also serves as a reference for my future projects.

Celebrating and sharing my milestones

I've also learned to celebrate my achievements and milestones along the way. Releasing a new feature or product these are a reason to celebrate, this keeps me motivated and reminds me of how far I've come on this learning journey.

Juggling side projects with my regular work commitments

Balancing side projects with work commitments is challenging.

I find it helpful to schedule specific blocks of time (at max 2hrs and on weekends in there are if there are no plans) for working on my side projects. This way, I can ensure that I'm making progress on my learning goals while also meeting my work responsibilities.

Additionally, I plan out my project so that I can work on it incrementally, like release the project with core functionality first and incrementally ship other features.

Side projects not only allow me to explore new technologies in a low-risk environment, but they also give me the opportunity to learn by doing. I find that I retain information better when I'm actively working on a project and applying what I've learned.

What side projects have you worked on to learn new technologies? Share your experiences and tips below!
keep creating🤘🏻!

What happens when you load freecodecamp.com in your browser?

Parth Bhardwaj — Sat, 28 May 2022 07:51:18 +0000

Understanding how the web works is as important as learning any skill about the web. What users see is a webpage which loads in the browser as soon as the user enters a URL but, there's a lot more things happening in the background which we will get know in this blog post by taking an example of loading freecodecamp.com in the browser.

It all starts with entering the website URL (freecodecamp.com) into your browser

The browser looks up the IP address for the domain name via DNS

Computers talk to each other using IP addresses but since humans cannot memorize thousands of strings of numbers so we use Domain names. For example, if we want to buy something from amazon, we think of 'amazon' and not any large string of numbers.

DNS (Domain Name System) is responsible for translating domain names into its corresponding IP address.

After typing the URL and pressing enter, the browser looks-up for the IP address for the domain name (freecodecamp.com) through DNS. This is done so that we can get the IP address of the server to which we have to establish a connection.

The browser sends HTTP request to the server

The servers supports multiple services like email, webpages, chats etc.
After the browser has connected to the server, it sends a HTTP request to the server to access these services. A HTTP request contains a request method, headers and a body.
A request method is the method which is performed on a given resource. Some examples of request methods are GET, PUT, POST etc.

Now lets take a look what an HTTP request looks like

The request URL is the URL which we entered in our browser
The request method is set to GET as we want to get
those webpages from the server
The remote address is the IP address of the domain name we
got via DNS.

Along with the IP address, there's an integer attached (443), this is called a PORT number. The PORT number 443 signify that this a secured request (HTTPS) for a web page.

When a HTTP request is initiated, a request header is generated by the browser and sent to the server. This header contains all the necessary information about the request like:

Requested URI
Request method
Path
The type of data that browser will accept (html, xml, text etc)

The server sends back a HTTP response

The server processes the request, creates a response and sends it back to the client :

Status code, which informs the client the status of the request
Response header
Requested resource

The response Status Code indicates whether a specific HTTP request has been successfully completed.

The response status codes are grouped in five classes :

Informational responses (100–199)
Successful responses (200–299)
Redirection messages (300–399)
Client error responses (400–499)
Server error responses (500–599)

In our example, the response status code we got in response is 301, which indicates that the requested resource has been moved to a different URL.

This new URL is mentioned in location key of the response header, which is freecodecamp.org.

Now a new HTTP request is created for freecodecamp.org and is sent to the server.

The response status code we get is 200, which indicates that the request has succeeded.

The browser begins rendering the HTML

The browser renders the index.html which we get as a response from response header.

The browser sends HTTP requests for additional objects embedded in HTML (images, css, JavaScript).

There it is! Our webpage has successfully loaded in our browser.

Launched my first product 🔥

Parth Bhardwaj — Sun, 01 Aug 2021 07:32:05 +0000

I have created my first ever Chrome extension called Page Pad.

I launched it on Product Hunt few weeks ago and it was featured at #4 Product of the day!

Page Pad is a productivity tool for creating notes on any web page you visit. It allows you to edit and organize notes for a particular web page and also notifies if the user has already created notes for the current web page. Re-visit any web page where notes were created and all your notes will be present as it is from where it was left off!

FEATURES:

📝 Create notes for individual web pages.
🔍 Refer to notes of all web pages of a website at once!
🌟 Rich text editor
✍🏽 Fully editable notes
💾 Autosave feature
⚡️ Works offline
♿️ Keyboard accessible
🌈 Custom themes

Download the extension from here and any review or feedbacks are most welcomed!

CSSBattle - Improve your CSS skills by doing awesome CSS challenges.

Parth Bhardwaj — Sat, 13 Feb 2021 08:26:41 +0000

I came across a sweet website for practicing CSS or challenging yourself to figure out solutions to CSS problems!

CSSBattle is an online CSS Code Golfing battleground. Here, players try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.

Visit the website now and start doing the awesome CSS challenges

https://cssbattle.dev/

Created my first CSS UI library.

Parth Bhardwaj — Thu, 24 Dec 2020 05:52:33 +0000

I have created a CSS UI library named 'Scratch' for creating websites and giving users a jump-start for creating website.

Scratch provides all major components and utilities to create a website and all components are made with pure CSS.

link to website is given below:

https://css-scratch.netlify.app/

Please do give your reviews and all suggestions are welcomed.