<![CDATA[Untitled Publication]]>https://blog.afeefuddin.comRSS for NodeFri, 17 Apr 2026 10:22:55 GMT60<![CDATA[Journey of a Newbie Programmer to GSOC Selection]]>https://blog.afeefuddin.com/journey-of-a-newbie-programmer-to-gsoc-selectionhttps://blog.afeefuddin.com/journey-of-a-newbie-programmer-to-gsoc-selectionSun, 19 May 2024 12:43:08 GMTThis is not my usual tech blog where I try to break down stuff, this is a blog about my tech journey till now, where I will try to narrate a bit about how I got into programming, how I got interested in Tech, and how to I got into Google summer of code. I’ll try to do a bit of intro about me initially and then elaborate on my Gsoc journey.

The big bang

My first introduction to engineering happened when I was in 9th grade. I developed a new excitement and hobby for tech, especially watching tech channels. I even tried creating my own YouTube channel and gained 15 subscribers (all of whom were my friends). This phase sparked my interest in programming. I wanted to make websites and apps but couldn't due to a lack of awareness and not having a computer. I got my first computer in 11th grade while I was preparing for the JEE. I secured 97 percentile, but it wasn't enough to get me into an NIT with a computer science branch. In hindsight, I'm grateful for this because it fueled my desire to prove myself and achieve something significant.

The birth of Adam and Eve

I started learning Java after I failed JEE and skipped JEE Advanced (I knew I wouldn’t be able to crack it). I explored more about programming and came across DSA (damn, that binary search was too hard for me to digest at first). I practiced a lot of DSA (I still struggle with DP) and did a bit of CP too (because I knew every CP question could be solved with a hashmap, kidding). The real turning point came when I developed an interest in web development. Initially, I struggled a lot, but as I continued working on projects, things gradually became much smoother.

The great inflection point in my web dev journey was clearly when I first participated in a hackathon. Through this hackathon, I learned a lot, especially about developing backends, working with databases, and understanding the importance of clean code when a single return statement cost us the victory.

I knew about Google Summer of Code earlier, but I delved deeper into it around September 2023. I started searching for organizations and explored the codebases of about 10-12 of them. I eventually settled on Zulip. I set up the project and tried contributing to it. My first PR was not great; it’s not always that simple. I kept working and trying to understand the codebase, which was quite hard for a newbie. I spent days and nights trying to understand a single file. This wasn't just another React project by a novice programmer; it was a complex codebase with around 500,000 lines of code, and even understanding 100 lines was difficult.

The Great flood

I almost gave up on Zulip around December when not much was happening in the past 2-3 months. I accepted the fact(myth) that GSOC was not my cup of tea, and I should try other things, GSOC organisations were announced this February and these were the messages I sent to my friend (we both aspired for GSOC initially)

Yes so there was no hope till February beginning, but the hope arose when my this PR got merged on February 16.

The PR that motivated me

The Noah’s Ark

I made this PR in January, and it was stale since then. But as things started moving, I got my hope back. I went to the projects list and tried figuring out my projects. I regained my vision, but I wasn't sure because I knew this would take a lot of perseverance, patience, luck, and consistency for the next 2 months amid college, internal exams, and managing personal and hackathon projects. I worked very hard, putting in 8-10 hours a day to ensure I didn't miss any chance of hitting the bull’s eye. From just 2 PRs merged initially, in these 1 and a half months, I got 10 more PRs merged, which made me satisfied that it is going to happen this year.

Evolution theory

These are the tips that helped me a lot in my journey and might help you as well.

  1. Hunger: The hunger to do something and achieve big is very important, the hunger to get it, the hunger to be the best the hunger to defeat everyone are very important. When Virat Kohli was asked how he got so much confidence he said:

“this is the guy I’ve always been, if someone’s getting a hundred, I have to get 200, otherwise no one's gonna notice and I had that fire inside me all the time and that’s exactly what I did to come up the ranks, I scored so many runs that people could not ignore me and that is my only driving force”.

This is the reason why he excels in his field and this is what makes me idolize him and this is what inspires me also. The hunger to do something will keep you moving forward.

  1. Never give up: When my PRs started getting merged, I regretted giving up earlier. The best thing you can do is to keep trying. As James Clear said in Atomic Habits:

“Masterty requires patience”.

  1. Open source is hard: Contributing to big organizations involves working on real codebases used by millions of people, which can be quite challenging. It’s important to recognize the effort and complexity involved. Unlike programs like GSSoC or Hacktoberfest, where it's easier to make small, manageable contributions, this will require a deeper understanding of the codebase. Please approach this with humility and readiness to learn.

  2. Clean communication and confidence: Confidence in your work is important, if you can’t explain your code, then forget about it, it is not happening. Good communication with the mentors and admin is very important if you aim to crack any of these programs.

  3. Write clean code: Writing clean code is a crucial part of your journey. If you don't write clean code, open source is not for you. No one will merge poor-quality code into their codebase. This skill develops over time, but the sooner you adapt, the better your situation will be.

  4. Learn Git: Git is the most important tool you should learn to make PRs, and no you don’t know Git even if you think you know it. Doing git push origin main is not knowing git. Learn about rebasing, squashing, grep, stashing etc.

  5. Vertical learning: Do you know what a prototype chain is in JavaScript, what generics are in TypeScript, or what suspense fallback is in React? How about implementing caching in backends? Most of you might not, even if you use similar tech stacks. The reason is that, as students, we often try to learn things broadly rather than deeply. There's nothing wrong with that, but if you want to excel at something, you need vertical learning—you need to go in-depth. Learning Next.js is not hard, but understanding it deeply is. There's always a trade-off between shipping fast and going deep; you need to balance them according to your goals.

  6. Learning over everything: I am not a motivational speaker, but one thing I have realised which is required for long-term success is Learning, to be honest with whatever you are doing, because if you can’t be honest with yourself then there is no hope.

The Apocalypse

In the end, I just want to say there is more to the world than just GSOC, LFX, or MLH. There are many things you can explore and many things we can do in life. This is what I tell myself and everyone: if you fail at something, it doesn't mean you'll fail at everything. At least go and try something new.

And in the end, as Nikhil Kamath infamously said:

“At the end of it each time you don’t do well at an exam, you don’t get good marks, that girl you like doesn’t like you back, you're jealous of another friend in your class or college. I think the one thing to remember at the end of it is B********* sab marne wale hain”

Credits

  • Youtube for existing

  • Friends who motivated me for GSOC

  • Family

  • Myself :)

    Feel free to connect with me on X and LinkedIn

]]><![CDATA[Webpack, Babel, CRA and VITE: What, Why and How?]]>https://blog.afeefuddin.com/webpack-babel-cra-and-vite-what-why-and-howhttps://blog.afeefuddin.com/webpack-babel-cra-and-vite-what-why-and-howSat, 16 Dec 2023 10:29:46 GMTIn today's digital age, everyone wants a website, and web development is at the forefront of meeting this demand. The internet's evolution, increased device usage, and the growing importance of online presence for businesses and individuals have fueled the surge in web development. With the rise of tools like React and Angular, creating impressive websites has become more accessible for developers. Collaboration in open-source communities and a focus on design have further shaped the field. In this interconnected world, web development stands as a crucial force, ensuring that people enjoy engaging and seamless online experiences.

But how did we arrived at this position? What made web development so handy for the developers.

Early Days of web development

Let us get into the basics of web development.

How are websites made or how were they made before fancy frameworks like React(that’s debatable), Angular, Vue, etc. came into picture?

Simple answer HTML,CSS,JS.
That’s it. That is it.
We only need to know these 3 technologies and it is possible to make the frontend of any website which exists in this world. Although it is definitely not an efficient way to do so, but we will come to this later on. We write code in HTML,CSS,JS and send it to the browser. Browsers only understand these 3 technologies and display your website accordingly.

Problems with the Web Trinity

How do we write code in HTML, CSS, JS? What is the structure?

Index.html

Styles.css

Script.js

Pretty simple right ?

Or is it?

Let us say hypothetically you are writing a social media application. Let us say Instagram, how many lines of code do you think you will require to make the entire UI?

100s ? 1000s? 10,000s? 100,000s ?
Maybe yes!

Will you write all that code in script.js file ?

A 100 thousand lines of code in script.js file will increase your problems instead of solving it.
So you will tend to split into multiple files. Let us say you use 100 files each containing 1000 lines of code.
How will you inject this code to the html file?

Obviously <Script> Tag, right?

Yes, but there is a problem!
You have to maintain the order. How? Let me explain with an example.

Let us say this is the order you have put in your html file.

So when you write code in your Script1.js you have to be cautious since you will not be able to use any code written in the files attached below it.

Imagine you’re writing the code of Liking a post.
What is the flow? First add the like to the post and then show it in the frontend to the user. The problem is if you have written a function to like the post on script1.js and you are calling another function to update the frontend, it must be in a file attached above it.

This is an issue, because it creates a lot of unnecessary mess.

What is the solution ?

One common solution to mitigate this problem is to use a module system like CommonJS or ES6 Modules. With modules, you can explicitly define dependencies and ensure that code is executed in the correct order. For example:

Script2.js

Here even if we have put Script2.js above Script1.js we are able to use the functions of Script1.js in Script2.js by making scripts of type module.

But again there is a problem , all browsers don’t support ES6 Modules fully so you need to fix this issue also.
How can we do that, we come back to the first solution, write all the code in one file, 100,000 lines in one file.
Is there any other way to solve this problem.

I guess yes.

Webpack.

Webpack

Webpack is a popular open-source JavaScript module bundler. It takes your project's files, such as JavaScript, CSS, and images, and bundles them together in a way that's optimized for the web.

Basically it takes all your 100,000 lines of code written in different files, transpile them and bundles them into a single file which you can attach to your index.html file and send to the browser.

How do you use it? Simple .
You need to create a webpack.config.json file where you will tell the webpack about all your files, which it will convert it to plain Html, Css, Js.
You can also use modern technologies like handlebars templates, Saas etc. with help of webpack.

But wait a minute, as we know not all browsers support newer versions of JavaScript, few browsers require older versions of Javascript, if we write a newer version of JavaScript, some browser might not be able to understand it.

For example arrow functions

Not all browsers are able to interpret this syntax. We need to solve this issue.

Babel Spawned

Babel

Babel is a widely used JavaScript compiler that allows developers to write code using the latest ECMAScript (ES) standards and features, and then transforms or transpiles that code into an older version of JavaScript that is compatible with a broader range of browsers

With the help of babel we are able to write modern javascript in our websites and the browser will still be able to understand.
We just have to compile the javascript file with the help of babel and attach the compiled file to our html page.

So with the help of babel and webpack we will be able to write all types of websites and run them in any browser.

Birth of Frameworks

All was Hunky dory till now, until people started trying to make new frameworks , backbone, angular and react came into picture.

But why frameworks?
Frameworks made it easy to write complex websites in an organized manner with features like state management, SPA , reusable components etc.

React JS

Among all the frameworks invented till now, REACT surpasses every one of them. React, which is arguably a JavaScript library, provides a proper structure to create a single page application with state management and reusable components.
React was initially trolled earlier because it created unnecessary mess while writing code with the problems like unnecessary re render and 100s of dependencies but it was eventually adopted by developer community with time and its popularity is quite visible nowadays.

React is a framework which makes it easy for you to write components especially with the introduction of JSX ( JavaScript XML ). JSX allow us to write HTML code in javascript.

But the problem was browser don’t understand anything apart from the web trinity(HTML,CSS,JS). That is why it is important to use Babel and webpack to convert the Jsx syntax to the browser understandable web trinity. @babel/preset-react is used to compile the jsx to javascript which is then run in the browser to make your website visible.

WebPack is also used in react to bundle all the files on build.

We need to configure webpack and babel in order to use react to make websites.

CRA and VITE

But there was a problem. Setting up a React project used to be a headache for developers. They had to juggle various configurations, dependencies, and build tools, making the process time-consuming and stressful. For newcomers, especially, getting everything right—like dependencies, webpack, and babel—was overwhelming.

In response, Facebook introduced a lifesaver: a new command-line tool to simplify the creation of React applications. The idea was to take away the hassle. This tool, known as Create React App (CRA), was designed with simplicity in mind. It provides a ready-to-go development environment, meaning developers don't need to fuss over manual configurations or setup of build tools. It's like a shortcut, allowing developers, both seasoned and new, to dive into building React applications without getting bogged down by the nitty-gritty details.

CRA is all about making life easier for developers. It's a straightforward solution to a problem that used to eat up a lot of time and energy. With CRA, starting a React project becomes a breeze, giving developers more time to focus on what they love—writing code and bringing their ideas to life.

However, as projects grew and evolved, some developers found problems with Create React App (CRA).The tool's opinionated nature, while initially helpful, became restrictive for those who wanted more control over their project configurations. One of the criticisms leveled against Create React App (CRA) was its perceived slowness, particularly as projects scaled in size and complexity. CRA relies on a traditional bundling approach, which involves packaging all the code and dependencies into a single bundle before serving it to the browser. As the project grows, the time it takes to bundle and rebuild the entire application increases, leading to slower development feedback loops.

Using CRA was troublesome for developers until 2020 when Evan You decided to come up with VITE.

According to official docs, VITE is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is not a React specific tool but it is also used to set up React projects in a fast and quick manner.

Unlike a CRA or bundler-based build setup, VITE does not build the entire application before serving. VITE prioritizes speed and faster feedback in development mode unlike the CRA. VITE became so revolutionary that today even react recommends VITE setup over CRA.

References:

  1. Google.com

  2. Chatgpt.com

  3. Webpack.js.org

  4. React.dev

  5. Create-react-app

  6. Vitejs.dev

  7. Afeef's Brain

]]><![CDATA[Peeking into Google Firebase]]>https://blog.afeefuddin.com/peeking-into-google-firebasehttps://blog.afeefuddin.com/peeking-into-google-firebaseSat, 09 Sep 2023 14:39:50 GMTFirebase is undoubtedly one of the coolest technologies developed by Google. Few days back I participated in a hackathon for which I created and deployed a website on Firebase. I read so many blogs and spent so much time asking questions to chat gpt and searching for answers in stack overflow.
In this blog I am going to Compile everything for you so when you want to learn Firebase, you can refer to this blog.

What is Firebase?

Okay instead of bombarding definitions towards you, I just wanna give you an example. Imagine you are creating a website or let us say you are creating a startup that sells something, let us say cool t-shirts. So you are creating a website for that, just think what are the requirements of that website. If you even have a vague idea of web development, you can create a list of things required for this website. First of all Front end, I mean Imagine a website that doesn’t have a front end. Obviously you can’t Imagine any such, because no such websites exist. Then Comes backend, but think of what are the things you require in the backend. Firstly an authenticator system for your user, whenever the user login you have to check his email and password. You also need a database to store the data of your users as well as the products, you also want to update this data in real-time.
What else?

Storage??

To store the data or images for your user/website!!

What else??

You also want to send notifications/emails to your customers. So basically an email/notification sending system!!

And just in case you are trying to make a recommender system for your customers you also need Machine Learning( A very fancy term. Isn’t it? )

And finally, if I am not missing anything you also want to host your website.
Now, let us figure out how you will execute all these features on your website.

  1. Authentication: For this, you will need a database to store the data of your user. And if you’re a JS person, you will have to write code in Node, and Express and check the thing on the server side. In the case of Python, Django might help you. Search yourself for other languages :)

  2. Database: MongoDB, SQL, PostgreSQL, etc.

  3. Storage: Read this and you will realize it’s not that easy

  4. Email notification: Well there are multiple ways to send emails to your users but it’s not very easy.

  5. Machine Learning: Python 🫥

  6. Hosting How will you host your website? It depends upon your requirement, for free there is Vercel and Netlify. If you have cash, there are AWS and GCP also. (Azure Crying in the corner)

    Azure also.

This involves a considerable amount of work and you need a lot of knowledge to code this website.

But is there any other way?

Yes exactly as Obama said the problem is you are not using firebase. Then use it na.

So what is Firebase? Okh definition this time!

Firebase is a comprehensive platform developed by Google that provides a variety of tools and services for building and managing web and mobile applications. It offers a range of features that help developers handle various aspects of development, including backend infrastructure, database management, authentication, hosting, and more. So basically for web developers, Firebase is BaaS( Backend as a Service).

Firebase can solve all your problems and provides you with a platform to set up everything in one Place. You can use Firebase auth for authentication of your users. Firebase Realtime database/Firestore to store the data, Firebase Storage, Cloud Messaging (FCM), Hosting and the fancy term(ML). Firebase can help you build a fully functional website without writing much code.
Don’t ask me about the front end, that you have to do by yourself.

Creating Firebase Account

You’re a developer, you can figure that out.

Creating the project

Once, you have created the firebase account you have to create the firebase project where you will be getting all the backend services. You can create multiple firebase projects and implement the functions in that. You can also invite collaborators to work on that project.

Authentication

Firebase authentication is one of the easiest ways to authenticate users for your websites. You can write some functions given in docs of Firebase and you can set-up the authentication for your website.

You can create the authentication system by User email/password, user’s Google account, Facebook, Twitter(X btw), Microsoft etc.

Imagine doing this without Firebase, very hectic. You can also add email verification, SMS verification and multi-factor authentication.

You can also add a reCaptcha verifier before login.

All of this can be done simply by using some Firebase functions.

Realtime Database

Once you are done with authentication, I will suggest you to also store the information of your user in a realtime database, because if you want to use this information you won’t be able to access it from the authenticator. Keep in mind, that Firebase Database and Authenticator are two different things, you can’t connect these with each other. So if your user is creating an account in your website you should use the authenticator to authenticate their information upon login and should also store their information in a database so that you can access it in the future. And if you just want to know how will you know which user has logged in, so for that the authenticator returns a uid upon login/signup. You can use that uid to store the data of your user in the database.

Realtime database stores data in json format, so if you know JSON, this is a piece of cake.

It stores data in a tree-like structure so when you want to access the child you first have to know about the parent.

One of the biggest features that I see of Realtime database is when you want to perform operations offline. Yes it can do that.

Wanna write some code ? Read this

Firestore

Firestore is a cloud-hosted NoSQL database provided by Firebase. Firestore is designed to store and synchronise data for web and mobile applications. It offers a more advanced and feature-rich solution compared to the Firebase Realtime Database. Firestore offers more powerful and advanced querying and it is more scalable. And guess what it also offers real time updates like realtime database.

Hope this helped.

Write some code

Cloud Storage

Heard of google drive? Yep that’s what cloud storage is! You can store your videos/images/audios in the cloud storage and access it whenever required. It’s basically a google cloud product to store your files. Cloud storage for firebase provide you a SDK to upload and download files directly from Cloud bucket. Cloud Storage for Firebase lets you securely upload these files directly from mobile devices and web browsers, handling spotty networks with ease.

In my personal opinion, this feature is easiest to integrate into your website.

Here are the docs: Storage

The Fancy Term

Well if you don’t know Machine Learning, no worries. Firebase is here to help you.

Firebase ML provides developers with tools to integrate machine learning capabilities into their mobile and web applications without requiring in-depth knowledge of machine learning concepts.Whether you're new or experienced in machine learning, you can implement the functionality you need in just a few lines of code.

For example, You want to launch your website in china, you can’t translate your website, Firebase ML kit can.

Features in ML Kit

  • Text recognition

  • Face detection

  • Barcode scanning

  • Model Management

  • Image labeling

  • Landmark recognition

  • Language detection

  • Smart reply

  • Using custom TensorFlow Lite models

  • On-Device and Cloud APIs

Read Docs

Cloud Functions

It’s not free.

Still Reading??

You can pay??

Okh okh.

So basically Google Cloud function is also a service of Google Cloud platform that can be used through Firebase, for example you want to send email notifications to your customers, how can you do that??

Yes, that’s where cloud functions are used. You can trigger Google Cloud functions whenever required and they will perform the functions for you. You just have to create functions and deploy them.

Here’s how you can deploy:

firebase deploy --only functions

Hosting

Firebase is a Platform that provides you hosting services for free(Yay).

Firebase Hosting offers developers a robust and secure platform for hosting web applications, whether they contain static or dynamic content, as well as microservices. It provides a high-quality solution for hosting web content suitable for production environments. With just a single command, you can effortlessly and rapidly deploy web applications, making them accessible through a global content delivery network. Additionally, Firebase Hosting seamlessly integrates with Cloud Functions and Cloud Run, enabling you to create and host microservices within the Firebase ecosystem.

In Firebase, you can host your website and you get the domain for free(Given that it is available)

Here's How You Can deploy your website: Deploy Now

Okh, so more or less these are the features of Firebase. There are more Like :

  • Performance Monitoring

  • Crashlytics

  • App Distribution

  • AdMob

  • Firebase Extensions

  • etc......

In Conclusion, I just wanna say Firebase is cool if you want to create your backend fast and easily. You just need to know Firebase basic functions and you're good to go.

So what are you waiting for?

Get Started

I hope you enjoyed reading this blog! :)

Refrences

  • Google

  • Chatgpt

  • Firebase.com

  • Afeef's brain

]]>