DEV Community: Afan Khan

Microsoft is ditching React

Afan Khan — Wed, 12 Jun 2024 08:24:40 +0000

Recently, the Microsoft Edge Team wrote an article on how Microsoft is improving Edge to become faster. However, Microsoft took shots at React and announced they are not going to use it for Edge anymore.

After their article, developers questioned whether React is worth learning anymore.

I will explain their entire article and how it affects React, JavaScript Developers, and what are the true intentions of the Microsoft Edge Team.

History

Microsoft Edge is built using Chromium, an Open-Source web browser project by Google. The default UI of Microsoft Edge is derived from Chromium.

Microsoft doesn't want Edge to look like Chrome (obviously). Therefore, Edge has UI components and elements designed by Microsoft. However, these components are made using React.

Many small components throughout Edge are created using React which collectively builds the entire browser.

The entire Edge browser isn't a React application. It combines multiple components in the form of HTML pages with React in them. The menu, dropdown, and the favourites tab are mini React apps.

That's not efficient, right? Especially for UI data that never changes dynamically. Its inefficiency has caused Microsoft to doubt React.

But this story is half-baked. We'll soon unveil whether React was at fault or Microsoft had a manufactured flaw.

Prepping for an interview? Leetcode is key. I built a Notion Dashboard to help you ace those DSA rounds. Store solutions, track progress, log problems — all in one place for $10.

Plus, get bonus resources for TypeScript, Python, and JavaScript, free lifetime access to a $4.99 exclusive community, and 25% off upcoming products. Grab it now and ace your prep!

CodeNexus - Crack Your Dream Tech Job Interview

Picture yourself dominating your coding interview, smoothly walking the interviewer through your solutions because you've meticulously organized everything. It's a win for you, but it's not easy without this dashboard. Here's how you can win easily.How will this Dashboard help you? 💵Ace your coding interviews and land your dream job. You cannot afford to make mistakes.Prepare for your coding interviews faster and focus on the bigger picture.Outpace other candidates. Many neglect the power of logging and organizing.Get closer to becoming an organised and experienced engineer.Spend less time memorizing and more time-solving questions and sharpening your skills.Log your progress to iterate and improve. Help others by sharing your logged solutions.Identify your weak spots and focus on them.Let me break it down for you. Data Structures and Algorithms are one of the most crucial parts of an interview. No DSA? Don't bother showing up to interviews.It's not about memorizing LeetCode or HackerRank solutions. It's about problem-solving skills that land you that dream job.What's it really about? 🧩DSA tests your ability to think on your feet. Recruiters want to see how you think under pressure, how you solve problems, and your logical approach.It shows how you break down complex problems. Success in Coding Interviews comes from explaining your thought process.But here's the kicker: Solving hundreds of questions doesn't mean anything if you blank out in interviews. Solution? Treat interviews like practice. Organize your work. Tag solutions. Build a database. And that's exactly what my template is all about.Unorganized notes = failure. Period. Practice smart, not just hard. What's Included? 👨‍🏫Log solutions, approaches, problems, constraints, examples, and complexitiesOrganize by difficulty or languageTag with topics for easy filteringAccess your personal solution library anytimeInvesting in this dashboard is minimal compared to the value of becoming a proficient engineer.Bonus 🎁CodeNexus isn't just about questions and solutions. It's packed with resources to level up your JavaScript, Python, or TypeScript game. I've handpicked the best Udemy courses, podcasts, and must-read books, all vetted by top developers.You'll get free access to my exclusive Discord community and other perks worth $4.99 a month. Upgrade to the pro version and you'll get all the bonus gifts, including lifetime access to the membership. This deal saves you over $50.Snag CodeNexus now and get a sweet 25% discount (up to $7) on my upcoming eBook. It's all there waiting for you inside the template.Afan Khan LLC - 502 W 7th St, STE 100, Erie, Pennsylvania, USA.

store.afankhan.com

The Problems

Microsoft claims that React isn’t efficient, so they made improvements and announced it in an article published on May 28th, 2024.

Microsoft observed that the bundles of code shared between multiple components were too large and that caused the browser to slow down.

They weren’t supposed to share a bundle with different components, but as they claim it is a problem, here are their reasons:

There was a modularity issue with the UI code. The teams working on different components shared common bundles, files, etc. It resulted in one part of the UI slowing down another part by sharing things that weren’t necessary.
Microsoft used a framework that relied on JavaScript to render the UI using the client-side rendering technique. Microsoft claims this is the second reason to slow their browser down.

As I explained earlier, Edge shared multiple React applications.

They didn’t initiate multiple React projects but used a single JavaScript Bundle in various places and mounted the Bundle to multiple props in many components.

A JavaScript Bundle is an optimization technique that combines multiple JavaScript files into a single line to reduce and process the server requests efficiently.

And the second reason is why I am writing this article. Indirectly, Microsoft addressed React as the framework that caused the bundle problem for them.

Microsoft addressed React indirectly because they are working on React-based projects, like React Native for Windows, MacOS, and Xbox. However, they still loathe it for Edge.

Even though Microsoft is building React Native, they still don’t use it for Edge. Edge is a native desktop application and React Native would be an ideal solution, but Microsoft begs to differ.

It is because using HTML, CSS, and JavaScript, or React for menus, dropdowns, etc., is a common pattern or technique, or it was in the olden days. There’s a reason why they are switching, right?

In the ancient days, Menus and their options were individual HTML files. Every button or link to perform a specific action would redirect to an HTML file.

However, that old pattern was only used for components like a Menu. But Microsoft clearly didn’t understand that.

They used an HTML file with React for every simple component. Every HTML file required JavaScript. And they shared this JavaScript code with every team as bundles of code.

Microsoft embedded multiple HTML pages (in React apps) into their browser to control their entire UI. And now, they are looking for a solution to both problems.

If you’re gearing up for an interview, I’ve got you covered. I’ve put together a killer list of must-know 102 JavaScript topics, 200+ JavaScript Interview questions, and 102 resources to learn them in a Notion Template. Grab it for just $5. Don’t miss out.

200+ Key JavaScript Interview Questions & Topics

Finally, a one-stop collection of key interview questions and concepts, each paired with resources.207 JavaScript Interview Questions.102 Unique Concepts Asked in JavaScript Interviews.102 Resources from across the Internet to help you learn.😵 Understanding the ProblemWhat’s the most valuable asset for someone prepping for an interview? Time. If you can't manage your time right, you won't get through everything. And if that happens, your dream job? Gone with the wind.It's about the effort too. Why spend an entire day digging through fifteen websites for interview questions, only to find they're all repetitive? Each site has the same questions, just jumbled up. It's a waste of time and effort.What’s more important? Your dream job. You can't bet $29 against $300,000+, right?🧰 Presenting the SolutionI’ve put together a list of questions, concepts, and resources based on their difficulty to help you prep for your JavaScript interview. These are hand-picked from around the globe with real recruiting experience.🎁 BonusAnd as a bonus, snag this list now and get a sweet 25% discount on my upcoming eBook. It's all there waiting for you inside the Notion list.

store.afankhan.com

The Solution

For starters, React wasn’t the problem. Microsoft implemented it incorrectly.

A bundle should work for a specific webpage and serve its purpose independently. Each page could have an individual bundle or collection.

However, when you share the same bundle or files across the work of different teams, you must expect chaos. Every team accesses and modifies the same bundles.

The outcome was expected. React wasn’t meant for what they were doing with it. React isn’t slow. But you cannot expect it to be blazing fast when you create dozens of instances.

Microsoft came up with a solution to a problem they created. They created a custom framework.

Microsoft announced WebUI 2.0 (not Web 2.0). A markup-first architecture. It solves the problem of large code bundles by minimizing their size and the amount of JavaScript that runs during the initialization path.

Microsoft has started using this new architecture to solve both problems I stated earlier. They used React for the wrong purpose, forgot that React Native exists, and solved a manufactured problem.

First, they used individual HTML files for each component with React inside them. Then, they offloaded the JavaScript code required by each HTML file into one bundle shared by ten other teams.

And now, they don’t use React anymore. What do you think about this?

If you want to contribute, comment with your opinion and if I should change anything. I am also available via E-mail at director@afankhan.com (Afan Khan LLC). Otherwise, Twitter (X) is the easiest way to reach out — @whyafan.

How to use NextAuth.JS with Discord

Afan Khan — Mon, 13 May 2024 07:32:33 +0000

I was working on a dashboard project recently and had the task of letting Discord users log in to the application and choose one of their servers to modify its properties.

For someone who hadn't implemented authentication with NextJS before, I was clueless. I kept switching between NextAuth, Auth0, Clerk, and Supabase. I abandoned NextAuth in the first few seconds when I experienced an error.

Being a newbie is difficult. More often than not, these first options are the most ideal. I tried everything and came back to NextAuth. I figured out how to implement it and spent countless hours, so you don't have to!

Let's dive into the article and see how to implement authentication ourselves.

Discord Provider for NextAuth

NextAuth allows developers to set up authentication for multiple services, like Google, Facebook, Apple, Github, etc. NextAuth calls these services and platforms as providers. In other words, these providers are services, and users can use them to log in to your application.

We will use the Discord Provider for this article. Unlike other providers, Discord requires extra configuration to set up authentication. We must first sort those requirements.

You must create an application on the Discord Developer Portal to access the Discord API and Discord's infrastructure. Then, take the Client ID and the Client Secret. You might need to reset the Client Secret for security purposes.

You can proceed to the next step once you get the necessary credentials. If you cannot get the relevant information, do a basic search on your choice of browser, and someone will guide you.

NextJS App Initialisation

If you haven't already, you must set up the NextJS application. Use the following command in your terminal to initiate a NextJS application and follow the steps.

npx create-next-app@latest

For the demonstration, I chose JavaScript over TypeScript (don't be angry at me) and TailwindCSS to demonstrate the authentication features in the front end. Also, I'm using the latest App Router to facilitate the API routes and a better experience overall.

I haven't chosen the src/ configuration either. We're going to do everything inside the app/ directory. However, you can follow the same steps and adjust the code snippets for your application.

Installing NextAuth

You must use the following command to install NextAuth in your project.

npm install next-auth

After the installation, create a new API route to handle different requests related to authentication. First, create a folder named api/ inside the app/ directory.

Then, add a nested folder inside the api/ directory and name it auth/. Finally, make a directory called [...nextauth] inside the auth/ directory. NextAuth requires this directory structure strictly to do its magic.

To handle the incoming requests, create a route.js file inside the [...nextauth] folder. It is the dynamic route handler. Required Path: app/api/auth/[...nextauth]/route.js.

Creating API Route for NextAuth

The dynamic route handler will store our NextAuth configuration and handle the incoming requests related to NextAuth.

Start by importing NextAuth to the route handler file. Then, import the Discord Provider from NextAuth. After importing them, we will begin configuring NextAuth.

import NextAuth from "next-auth/next";
import DiscordProvider from "next-auth/providers/discord";

You will need your Client ID and Client Secret now. Keep them handy. Now, you will create an object named AuthOptions. It will be an object with values required for the authentication.

Remember, you must use the export keyword while initialising the object.

We will use this object to access the current session in server components. By the way, even the session is server-based and not DB-related. Here's how your file should look like.

import NextAuth from "next-auth/next";
import DiscordProvider from "next-auth/providers/discord";

export const AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: "CLIENT_SECRET",
      clientSecret:
        "CLIENT_SECRET",
    }),
  ],
};

Now, you must initialise the authentication using the NextAuth function. This function requires the AuthOptions and its properties as parameters. Therefore, we will pass the AuthOptions object as a parameter.

const handler = NextAuth(AuthOptions);

You successfully integrated your configuration options with NextAuth. However, there's more. When someone uses Discord to log in to their account, Discord generates a code for the application to process and access the account of the signed-in user.

We can use this unique code to get a serialized token. A token is a unique string of characters representing the signed-in user and acts as a keycard to access the Discord API. We can only access the Discord API if we have the Client Secret of the bot or the token of a valid Discord user.

You can think of the token as the password to Discord's infrastructure and database but limited to the signed-in user.

Some of you might be wondering where this unique code resides. Discord puts it in the URL where the application redirects the user after a successful sign-in. Here's how NextAuth helps us.

Instead of putting our custom redirection URL, we will take the help of NextAuth. In the OAuth section of the selected application in the Discord Developer Portal, I will insert the following redirection URL, which will redirect the user to the route handler of NextAuth after a successful login.

The redirection URL is the path to the dynamic route handler we had created earlier in our locally stored application. In the production build, you will replace the localhost:3000 with your domain name or VPS IP.

Once the user logs in, they will get redirected to NextAuth's route handling system, and NextAuth will immediately swap the code for a token and store it.

NextAuth Callbacks

I want the user to get redirected to a different page once the user logs in. I don't want them to remain on the default NextAuth page or get redirected to the root directory (homepage) by default. Therefore, I'll use a callback by NextAuth to handle the redirection.

NextAuth provides callbacks that developers can configure for their unique use cases. NextAuth callbacks get invoked whenever specific events are triggered. For example, the signIn() callback will execute when a user logs in.

In our case, we will override the redirect() callback. The callback takes two parameters, but we only need the baseUrl, which is usually the URL of the root directory (localhost:3000/).

import NextAuth from "next-auth/next";
import DiscordProvider from "next-auth/providers/discord";

export const AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: "YOUR_CLIENT_ID",
      clientSecret:
        "YOUR_CLIENT_SECRET",
    }),
  ],

  callbacks: {
    async redirect({ url, baseUrl }) {
      return baseUrl + "/dashboard";
    },
  },
};

const handler = NextAuth(AuthOptions);

You will also export the result of invoking the NextAuth() function from the route handler. Otherwise, GET and POST requests to access the sessions, or otherwise, will not work.

Here's what your route.js file should look like. You can replace the /dashboard with whatever you desire.

import NextAuth from "next-auth/next";
import DiscordProvider from "next-auth/providers/discord";

export const AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: "YOUR_CLIENT_ID",
      clientSecret:
        "YOUR_CLIENT_SECRET",
    }),
  ],

  callbacks: {
    async redirect({ url, baseUrl }) {
      return baseUrl + "/dashboard";
    },
  },
};

const handler = NextAuth(AuthOptions);

export { handler as GET, handler as POST };

Discord Permissions

By default, you can only access the username and email of the signed-in user. You can try to use the Discord API and its endpoints to access more information, but Discord will deny the access. It is because Discord boosts privacy and security.

You need the user's permission to access more information. You can take their permission while they are trying to log in. If you have noticed, Discord lists the permissions the user gives to the application when trying to log in.

If you thought they were random, you were mistaken. The developer requests these permissions, and users usually overlook them. We can request permissions by adding them to the authorization URL. It's time to go back to the route.js file.

In the DiscordProvider function, you must add another property named authorization. The value of this property will depend on your requirements of the application. As I had stated earlier, I want to access the guilds of the signed-in user and display them.

Therefore, I will ask for that permission, including a few others. You can find them in the Discord Developer Portal.

Every permission name will be connected using the '+' symbol in the URL query params.

providers: [
    DiscordProvider({
      clientId: "YOUR_CLIENT_ID",
      clientSecret:
        "YOUR_CLIENT_SECRET",
      authorization:
        "https://discord.com/api/oauth2/authorize?scope=identify+guilds",
    }),
  ],

Now, let us try to configure the front end to initiate the login process.

Configuring the front-end

Since I initiated a new application, I will make modifications in the root directory. If you wish to put the login button elsewhere, you can do so. The steps remain the same.

I will create a client component named LoginUsingDiscord.jsx in the root directory to handle the onClick events because my main page.js file will remain in the default server component mode.

Inside the component, I will import the signIn() function from "next-auth/react" and invoke it whenever someone clicks on the "Login" button. We can pass one parameter to the signIn() function. It is the name of the provider that the login button represents and should get invoked when clicked.

"use client";

import { signIn, signOut } from "next-auth/react";

export default function LoginUsingDiscord() {
  return (
    <section className="flex gap-8 items-center justify-center mt-12">
      <p className="font-bold text-lg">Login Using Discord</p>
      <button
        onClick={() => signIn("discord")}
        className="text-base py-3 px-4 bg-[#5865F2]"
      >
        Login
      </button>
    </section>
  );
}

And that's it. Once you click the button, you will get redirected to the Discord login interface. After the serialization of the token, you will get pointed towards your selected URL from the redirect() callback. For me, it was /dashboard.

After a successful login, you can access the session at localhost:3000/api/auth/session. As I explained, this session will only have the username and email by default. I want to store the Discord user ID of the signed-in user and use it globally in the application.

I will override another callback function named signIn() inside route.js. For security purposes, the token isn't accessible elsewhere in the application except in the boundaries of NextAuth.

async signIn({ account }) {
  const discordToken = account.access_token;

  return true;
},

I'm glad you found this article to be helpful. I'm writing an eBook to help people get jobs, earn outsized salaries, etc. It will take me a month or two to complete it.

However, I've opened the waitlist for people to hop in early and benefit from the early-bird discount and exclusive access to the community to grow a personal brand. You will also meet like-minded people.

Here's the link to sign up. I will not bore you with emails. But if I send an email, it will be worth looking out for.

The signIn() callback provides the user, account, session and other values as parameters. We only require the account parameter to retrieve the access token.

In my dashboard project, I stored the token inside the DB after hashing it. However, I won't do the same here. I will try to access the information about the user using the token and print it in the console for simplicity.

You must save the token somewhere to use the Discord API in routes or server components. Every request to the Discord API requires the Discord user token. Since I cannot make this article complex, I will not store the token anywhere and solely display the fetched data in the console.

However, I will guide you on accessing the session on other pages in your application and display information later.

Since I'm not storing the token anywhere, I cannot use it outside the route.js file. Therefore, I will make an API request to the Discord API inside the signIn() callback and show you how it works.

Using the Discord API

Let us continue modifying the signIn() callback. I will fetch the information about the user and print it to the console for simplicity. The endpoints of these API requests are in the Discord Documentation.

I'm making a GET request to the api/users/@me endpoint provided by Discord to get an object with the information of the signed-in user. It doesn't matter whether the user is signed in. Each access token represents a unique user.

The token expires and requires a renewal every month. I make those API requests on the user's behalf whenever I use their token. Discord treats me as a mediator.

async signIn({ account }) {
   const discordToken = account.access_token;

   const discordUser = await fetch(`https://discord.com/api/users/@me`, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${discordToken}`,
      },
    }).then((res) => res.json());

    console.log(discordUser);

    return true;
},

You can pass the access token in the Authorization property of the header and get a response from the API endpoint if you did everything correctly.

I eventually added a sign-out button inside the LoginUsingDiscord component. I used the signOut() function. It does not require any parameters because only one service can have an active session. Here's the code.

<button
  onClick={() => signOut()} className="text-base py-3 px-4 bg-[#ED4245]">
  Sign Out
</button>

Conclusion

Authentication is challenging to implement in most applications, and NextAuth makes it easier for us to do so. You learned how to create a session, allow users to log in using Discord, use the token to send API requests to the Discord API, etc.

In the same way, you can use other providers, such as Google. I hope this article proved helpful to you. If you want to get a job as a software engineer, I suggest you join the waitlist.

If you have any doubts, reach out to hello@afankhan.com or @whyafan elsewhere.

Generator Functions & Iterators in JavaScript

Afan Khan — Mon, 29 Apr 2024 10:54:23 +0000

More often than not, interviewers ask about Generator Functions, the Yield Keyword, and Iterators. Most developers have no idea what they mean.

Through this article, I will explain those complicated concepts using the fundamentals. Even I didn’t know they existed. I read about them in a QNA where developers were supposed to submit the names of intricate concepts.

However, Generators have the same reputation as Closures. They are complicated because the crowd says so. Let us understand what Generators mean, the Yield keyword, and Iterators.

What are Iterators

By definition, iterators represent recurrence. In JavaScript, as per MDN, Iterators and Generators bring the concept of iteration, i.e., repetition, directly into the core language.

If you remember, we have loops in JavaScript to perform the repetition of code statements. We have methods, like map(), too.

However, the concept of Iterators in this context alongside Generators is different. Iterators that are custom and Generators use loops to perform their function. Generators and custom Iterators provide a mechanism for modifying the behaviour of the default iterators in the language, like loops.

const exampleArr = [1, 2, 3, 4, 5];

for(const val of exampleArr) {
    console.log(val);
}

You are looking at a standard for-of loop. It doesn’t keep track of the current index or iteration number. It doesn’t know whether it should begin from the left or right-hand side. Unlike the traditional for-loop, we don’t mention a starting or ending index in the for-of loop.

The loop moves from left to right sequentially because the array contains an iterator function instructing the for-of loop to iterate through a specific array in that sequence. It is the default behaviour.

The for-of loop is an iterator because it executes the same statements on each array element repetitively. However, the for-of loop is a default iterator.

Sometimes, you require a custom iterator that repeats specific code statements or traverses through a datatype in a specified manner. In massive applications, developers create custom data types. Those datatypes require custom iterators to access that data and manipulate them. Iterators are crucial when writing custom libraries.

In the new context, an iterator is an object that defines the sequence of the iteration and potentially the values that will get returned when the code statements terminate. We can create custom iterators using the Iterator Protocol.

Every iterator implements the Iterator Protocol with a next() method that gets returned by it. The next() method seems logical because the job of iterators is to traverse through elements from one index to another in a specific sequence. The method returns an object with two properties —

value — It holds the next value in the iteration sequence.
done — It holds a boolean value. It represents whether the last value in the sequence has been traversed or consumed. If the .value and .done properties are present in an object, they represent the iterator’s return value.

The most common iterators in JavaScript are forEach(), filter(), map(), etc., which return each value in a sequence. Those are default iterators. Now, let us create a custom iterator.

Custom Iterator

Let’s reciprocate the for-loop and create a sequence that executes code statements for each iteration of an imaginary datatype. Remember, this is not how we make custom iterators. We use Generators, and the following example is the complicated approach. However, it is required to understand Generator Functions.

function customIterate(start = 0, end = Infinity, step = 1) {
  let nextIndex = start;
  let iterationCount = 0;

  return {
    // Returns a method to iterate over the iterator
    next() {
      // Stores an object throughout the iteration to keep track of the value and progress
      let result;
      // Indicates that iteration isn't finished
      if (nextIndex < end) {
        // Assigning those traditional value and done properties
        result = {
          value: nextIndex,
          done: false,
        };

        // Incrementing the index based on the steps
        nextIndex += step;
        // Incrementing the iteration count
        iterationCount++;

        // Returning the object
        return result;
      } else {
        return { value: iterationCount, done: true };
      }
    },
  };
}

// Storing the instance of the Iterator
const instanceOfIterator = customIterate(0, 20, 5);

// Invoking the next() method that iterates through the iterator
let result = instanceOfIterator.next();

// Till the .done property returns true
while (!result.done) {
  console.log(result.value);

  // invoking the next() method to update the result value for the while-loop and the iterator
  result = instanceOfIterator.next();
}

I will start with a function customIterate(). It accepts your desired starting index, ending index, and step size as inputs. We will use default values if the user fails to provide them.

Now, imagine an invisible runner flashing along numbers. Initially, they stand at the starting index. Inside the function, we prepare two trackers: nextIndex tells us where the runner is now, and iterationCount keeps tabs on how many laps they completed.

The real magic happens in the next() method. It is the engine that drives the iteration. If our runner has not crossed the finish line, it hands you the current position and prompts the running to continue with a .done flag set to false. Then, it hops forward based on the step size and keeps track of one more lap.

But when the runner reaches the end, things change. Instead of another position, I offer the total number of laps as a farewell and wave a .done flag of true. The .done property lets you know the exercise is over.

To put this runner to work, you create an iterator object using customIterate(). Then, you kick things off with a manual call to the next(). The manual call gives you the initial position and gets the runner moving.

The next step is a familiar friend: the while loop. As long as the runner keeps going, you can access their current location through the result.value property, do whatever cool stuff you want with it, and then hand them a new next() call to keep the journey going.

This custom iterator approach works, but it is like building a bicycle from scratch when a sleek, ready-made option exists. Now, this is where generator functions come in. They offer a much simpler and safer way to handle iterations, and I will dive into their world next.

What are Generator Functions

We cannot create iterators that use the mechanism of the for-loop with standard Iterator Protocol. The solution is to use Generator Functions, but that's not the only reason anyone would want to use them.

Standard Iterators store explicit state values inside their iterator functions. For example, the nextStart and iterationCount variables store the current progress or state of the iterator.

Maintaining these states manually with variables is complicated without careful programming principles. Generator Functions are a powerful alternative that can maintain the states.

Generator functions allow you to write the same iterative algorithm by creating a single function whose execution is not continuous. We can pause and resume at random intervals. These functions have a separate syntax.

To define generators, we use the function* keyword. There is an extra asterisk to the standard syntax. We're still trying to iterate through custom datatype but without explicit states. In addition to the strange syntax, JavaScript introduces a new keyword called yield.

When we invoke generator functions, they don't initially execute the code. Instead, they return a specific object called a Generator. We store that object inside another variable and invoke the next() method or access the .done and .value properties through that object. Remember, Generators are beyond Iterators.

Generator functions can run infinite loops because they can pause and resume their execution. We cannot have infinite loops without them because that would freeze our respective machines. The loop will continuously execute without any pauses.

Generators allow us to insert those pauses and run infinite loops without worrying about freezing our computers. Until the next() method gets called, the loop stays on hold after discovering the yield keyword.

You will understand this in a bit. Depending on your application, you can use Generators to mimic the async/await functionality and deal with asynchronous code. Not to mention, they are also used to implement infinite scrolls on the front end.

What is the Yield Keyword

By definition, the yield keyword pauses and resumes the generator execution. The yield keyword pauses the execution of the generator till it encounters another next() method. Or till the next iteration comes around while using a loop. It is a distinctive sort of return statement keyword used inside a generator.

The yield keyword is similar to async / await. Without the async keyword, we cannot utilize await and vice-versa. Similarly, we cannot use the yield keyword without a generator function.

// Generator Function
function* iterable() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
}

// Storing the returned object of the Generator
const iterableVal = iterable();

// Iterating
for (const val of iterableVal) {
  console.log(val);
}

If you run this code, you will get a sequence of values printed to the console from 1 to 4. It prints all the values provided inside the generator function with the yield keyword. Why? Let me explain.

Using the for-of loop, JavaScript prints the results sequentially. The JS Engine detects a generator function that represents iterable and repetitive elements. The yield keyword works in harmony with the function.

Generators accept values and repeatedly return a new output. It returns the output using the yield keyword sequentially with pauses at different intervals. The yield keyword is like the return keyword. Hence, those numbers show up in the console.

Generators inherit the idea of an iterator that iterates and executes the same code on each element to get an output. Whenever JS encounters a yield keyword, it prints the value followed by the keyword and resumes the execution. When it encounters another yield keyword, it repeats the same process.

Let us expand on that example. I will implement the same logic we had implemented earlier when understanding Iterators.

// Example 2.0

// Generator Function
function* genIterator(start, end, step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i;
  }
}

// Creates a Generator Object using the Generator Function
const generatorObject = genIterator(1, 20);

// Loops through the values of the Generator Object
for (const val of generatorObject) {
  console.log(val);
}

I defined a function with a for-loop, passing in the same parameters. We do not need if-statements or manual step-by-step increments; the for-loop does the heavy lifting, returning an integer for each iteration.

I stored the outcome of invoking the generator function inside another variable because generator functions return a Generator object. In our case, we stored the object inside the generatorObject variable after invoking genIterator().

The yield statement returns the value stored in i after each iteration. This lightweight approach lets you iterate through custom data types without crafting logic for each step.

You can fetch information from the database and call the yield keyword to pause and return the values instead of iterating continuously.

Think of it this way: instead of gulping down a whole database at once, you can use yield to savour each piece of information, pausing between bites. It ensures efficient handling of large datasets and provides ultimate control over the iteration process.

If we do not use the yield keyword, we can remove the for-of loop and invoke the next() method repeatedly and manually. Since the yield keyword pauses the generator, we must execute the next() method to resume the execution. We use the for-of loop for the same reason.

The for-loop replaces the massive logic inside the loop, and the for-of loop remains the same to continue the iterator. You can access the same .done and .value properties too.

function* genIterator(start, end, step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i;
  }
}

const generatorObject = genIterator(1, 5);

console.log(generatorObject.next().value);
console.log(generatorObject.next().done);

console.log(generatorObject.next().value);
console.log(generatorObject.next().done);

console.log(generatorObject.next().value);
console.log(generatorObject.next().done);

A few iterations are skipped in this approach because the next() method gets executed. The paused iterations are resumed and then skipped while printing them. Instead, you can do the following.

function* genIterator(start, end, step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i;
  }
}

const generatorObject = genIterator(1, 5);

console.log(generatorObject.next());
console.log(generatorObject.next());
console.log(generatorObject.next());
console.log(generatorObject.next());
console.log(generatorObject.next());
console.log(generatorObject.next());

The simplest way to access the values directly without skipping iterations and manually executing the next() method is to use a for-of loop, as shown in Example 2.0.

If you still cannot understand the difference, let me explain. We all know that loops do not halt at any point to execute code statements. Once they start, they only stop at the end.

We can use the break keyword to stop the loop entirely or the continue keyword to skip iterations. However, we can never pause the execution of a loop.

It is where the yield keyword becomes a convenient mechanism. We are using the for-loop inside the generator function. Instead of letting the for-loop complete its execution immediately, we use the yield keyword to pause and resume its execution once we attain the desired data.

It helps us manage database transactions, manipulation or handling data. Let me do DOM manipulation using a Generator Function.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Generator Functions</title>
  </head>
  <body>
    <button class="yield-result">Click Here</button>

    <script src="script.js"></script>
    <script src="example.js"></script>
  </body>
</html>

function* genIterator(start, end, step = 1) {
  for (let i = start; i < end; i += step) {
    yield i;
  }
}

const generatorObject = genIterator(1, 10);
const btn = document.querySelector(".yield-result");

btn.addEventListener("click", () => {
  btn.textContent = generatorObject.next().value;
});

I created a button element inside the HTML document. I attached an event listener, used the values fetched from the generator function after each pause and displayed it through the button.

The last returned object from the next() with the .done property contained true and indicated its competition after the entire generator completes its execution. The .value property remained undefined after resuming the last yield statement because there are no more values to return.

When you invoke the function, it returns nothing except a Generator object. Your code remains unexecuted. Previously, I had four yield statements inside a generator function and configured a for-of loop to iterate through them. Here’s how they worked.

Generator Function Explanation | Medium Article - YouTube

This is a small explanation for a concept in JavaScript called Generator Function. The entire video is meant for my medium article.

youtube.com

The last yield statement doesn't return true for the .done property because the generator function gets paused and doesn't finish the execution.

We can have multiple generators at the same time. You can create another instance or object of the same or another generator and use a loop or manually invoke the next() method.

// First Generator
function* firstGen() {
  yield 1;
}

// Second Generator
function* secondGen() {
  yield 1;
}

const firstObj = firstGen();
const secondObj = firstGen();

// First Object
console.log(firstObj.next());
// Second Object
console.log(secondObj.next());

Each instance of the same generator is separate and does not share values. You can create many of them. Let’s create an infinite loop and control it using a generator.

function* infiniteLoop() {
  const username = "@whyafan";

    // Infinite Loop
  while (true) {
    yield username;
    console.log("Yielded!");
  }

    // Ignored because infinite loop never ends
  console.log("Can JS reach this statement?");
}

const infiniteExample = infiniteLoop();

console.log(infiniteExample.next());
console.log(infiniteExample.next());
console.log(infiniteExample.next());
console.log(infiniteExample.next());

I inserted a while-loop and conditioned it to execute the code statements inside it till the condition represented a truthy value. Of course, true will infinitely return a truthy value, so the loop will never stop.

I yielded my username on all social media platforms through the while-loop. Whenever the returned object gets printed, the value will be @whyafan.

Remember, the .done property will never return true because this is an infinite loop. I invoked the next() method four times and received the returned object in the same limit because the yield keyword pauses the generator till an approaching next() method gets discovered in the wild.

Let us see how we can use the generator function for an array. We will access the array elements sequentially.

function* arrayExample(start, end = Infinity, step = 1, array) {
  for (let i = start; i <= end; i += step) {
    yield array[i];
  }
}

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const arrayObj = arrayExample(0, 10, 2, array);

console.log(arrayObj.next());
console.log(arrayObj.next());
console.log(arrayObj.next());
console.log(arrayObj.next());
console.log(arrayObj.next());
console.log(arrayObj.next());

Lastly, let us see how we can use the yield keyword to accept values passed as a parameter to the next() method.

function* passingToNext() {
  let id = 1;

  while (true) {
        // This is where JS received the params
    const increment = yield id;

    if (increment !== null || increment !== undefined) {
      id += increment;
    } else {
      id++;
    }
  }
}

const yieldObj = passingToNext();
console.log(yieldObj.next());
console.log(yieldObj.next(2));
console.log(yieldObj.next(3));
console.log(yieldObj.next(4));

I created an infinite while loop like the previous examples. I purposely stored the result of the yield keyword inside another variable because when you pass a value as a parameter to the next() method, it takes that value and gives it to the yield keyword.

When I passed 2 to the next() method, it received that integer through the id variable with the yield keyword and stored that inside the increment variable. Then, I checked whether the received value is null or undefined. If yes, I incremented the id variable without the value received from the user.

Otherwise, I incremented the id variable with the integer received by the user when they passed it as a value to the next() method.

You cannot pass a value to the first next() method execution because yield doesn’t exist during that iteration. It returns a result at the second iteration onwards.

Remember, Generator functions can be a property of an object or the method of a class.

Avoid these 5 mistakes as a Web Developer

Afan Khan — Sun, 21 Jan 2024 07:53:31 +0000

We all make mistakes. It's the most efficient way to learn, grow, and build experience. You can improve yourself if you reflect and learn from your mistakes.

Most humans don't reflect on their mistakes. They criticize themselves for making those mistakes. A third person doesn't need to blame them; they do it themselves.

I'll list ten mistakes that I've seen back-end engineers make throughout their Software Engineering career. Your current position doesn't matter when it comes to making mistakes. We all make them at any time in our careers.

Mistake 1

Technical Debt. Over-engineering. Does that ring a bell? Often, developers shift their focus to the technical side rather than understanding how the user will utilize the application. Based on those requirements, they don’t write their code. If back-end engineers used technologies based on the requirements, they would significantly reduce the required effort and cost.

Mostly, beginners fall for this mistake. As they are new in the field, they don’t know what technologies will serve efficiently for the user while reducing the technical burden. The application becomes slow for the end user when more technologies and processing are required.

New people in any field, hobby, or habit tend to overcomplicate the process. However, seniors reduce the effort and cost while using fewer technologies to save development and user time.

Furthermore, Technical Debt indicates non-readable code. Write logic that other engineers can understand is the first rule of development. It means using industry-standard techniques and coding standards, such as this one, or writing variables in the CamalCase convention.

Beginners feel a sense of pride when they use everything they possibly can. Later, the same choices become a headache when they make the application slower. It requires seniors to refactor the code, and that is a waste of time. The testing requirements and the chances of bugs increase with more code. Write less code.

Avoid this mistake by keeping pride aside and choosing only the necessary technologies with the best industry standards. I made this mistake when I started learning front-end frameworks and libraries. It resulted in more code, more bugs, and massive refactoring costs. Follow the DRY, KISS, or YAGNI standards.

Mistake 2

I spent money on learning React from Udemy. I must use those skills and build every application with React. Right? NO. Don’t use the same technologies, libraries, or frameworks for every task. The choice of these frameworks depends on the problem that you are solving.

React + Vite might work for intermediate Web Applications. However, it’s not suitable for performance-oriented applications. That’s when you shift and opt for SolidJS, NextJS, or any other framework to increase the performance.

Based on the given task, change the technologies you use. Keep your fundamentals strong in the chosen language, like JavaScript, and keep switching technologies.

Don’t stick to one technology. It limits your learning capabilities, and your application faces problems. Later, you would have to change those technologies, which you could have done in the first place.

Mistake 3

Individuals with bad intentions have outrageous techniques to attack your database and steal credentials. SQL injection is a common technique. If it is frequent, do people still fall for it? YES!

It is because seniors might write code that prevents people from injecting queries that alter the database, but juniors aren’t aware of the intricacies of this field.

As of 2022, SQL Injection attacks received 33% of the responsibility for overall vulnerabilities caused in Web Applications. Due to the concatenation of unwanted strings with standard queries, individuals access your DB and usually execute DML commands.

Avoid this mistake by passing specific required parameters inside queries rather than generalizing them. Don’t create a standard query for every operation to reduce your effort. It can lead to phone calls at 2:30 AM. Use multiple databases, and don’t keep all fruits in the same basket.

Diversification is the key. Perform code reviews. Validate each string, especially the concatenated ones, while executing queries. Keep backing up the production DB.

Mistake 4

Are you someone who focuses on aesthetics instead of usability? It is a common rookie mistake. Beginner developers focus less on how the user utilizes the application and overcomplicate the designs. The UIUX might look beautiful till the testing phase.

The business turnover decreases once the user utilizes your application because 95% of them cannot use it. Blame the complexity. Users desire a simple design. Users want interfaces that they have already seen before. Humans focus on their habits. They want to dedicate less effort to any task.

Users will not use your application if you force them to learn a new pattern. Humans are familiar with specific patterns initiated by previous generations of designers. Young folks may change their habits. The majority of users will not.

Design and build for the masses. Avoid this mistake by creating an interface using existing standards and user patterns or behaviour. Let the user buy your product with minimum effort. Social Media has created a solution for this mistake. There’s a reason why it is addictive. Less effort, more reward.

Mistake 5

For the moment, make a solution and write some code. We will see what happens down the road. We will make changes later, right? NO. Think of scalability from scratch. The amount of refactoring and development time required to fix bugs and errors isn’t ideal.

From the start itself, choose specific technologies that solve the problem and understand how they are scalable based on the possible future metrics. For example, can we use React performance-specific tasks in the future if we decide to diversify? Nope. Should we then use it? No. Choose another technology.

Most back-end engineers use the same set of technologies for every problem. Developers don’t think of the possible traffic and data transactions that could occur in the future. In 2013, hackers took advantage of the poorly scalable codebase of Snapchat and accessed the data of millions of users. You don’t want that to happen.

Choose technologies that scale. Keep optimizing your code. Reduce the future development time and cost.

How to become a Software Engineer in 2024

Afan Khan — Wed, 03 Jan 2024 11:57:47 +0000

There isn't a one-size-fits-all approach to becoming a Software Engineer. You might not know what to learn when you initially enter the field. To some degree, roadmaps enable you to start your journey and steer you in the right direction.

For the same reason, this article consists of six different roadmaps within Software Engineering for you to get started.

However, besides those roadmaps, one must focus on developing a list of required skills. I'll deliver that list in this article. Those crucial skills will enable you to work with teams, communicate your ideas, ace your interviews, and more.

Let's take the Why-How-When framework I picked for this article. Furthermore, I have a dedicated section called "What to look out for" that expresses the lessons I learned throughout 2023 at the end. You must continue reading to learn from my mistakes and avoid making them.

Why

More often than not, engineers face Impostor Syndrome. We experience challenges and setbacks that make us feel underskilled and overwhelmed. We feel like we don’t know enough. In the SWE world, there are moments where we feel utterly useless if we can’t build an application or implement a feature.

These moments are easier to deal with when you know why you started. I remember I loved computers when I was a kid. I didn’t know enough about programming. But, I felt peace when I created something using them. Even if my projects meant crap compared to industry standards, I still made slight progress.

Later on, I wanted to become an entrepreneur. I desired to build solutions. I saw that programming was booming. It was a high-paying industry. I wanted to create solutions and chose this field because I had experience writing HTML & CSS code. Yes, that’s funny.

I recognised financial potential with a passion for doing something. I purchased courses with my startup money and upskilled daily. I reminded myself why I started. It was necessary to help me continue because humans often forget why they started doing something.

We get lost in fancy roadmaps, videos, courses, etc. But it’s necessary to look back once in a while.

“How cool would it be if I could create a website and launch it on the World Wide Web for everyone to access and use?” And that’s where it started. Forget other success stories. Focus on building yours. Your reason to enter this field can be for the money. That’s fine. We all have different goals.

The idea is to focus on yourself and not others. This field has many prodigies with early success stories. I don’t listen to their stories but spend time building mine. Learn from their mistakes instead of being jealous.

Once you get your purpose straight, the next step is to understand how to conquer that purpose.

How

Now, explore the ways to achieve your purpose. I deliberately chose the word “explore” because the choices committed during this step change once beginners turn intermediate. The method of doing something should change as you grow. You explore more options and understand the intricacies of the field.

I can build a product or solution to solve a specific problem in a hundred different fields. I have the options. As a beginner, I must narrow them down based on my interests, experience, and knowledge. It can be UIUX design, Desktop Development, Data Science, or Front-End Web Development.

I ask myself — “Which of these fields most resonate with me? If I had to sit for 10 hours, which field would I choose and not get exhausted?” For me, the answer was Web Development. I began and eventually explored all the other options with experience. I knew the answer because I had explored other options.

Before choosing Web Development or SWE, I built various products using different technologies in diverse fields and industries. Try everything to figure out what gives you joy. Follow the principles of Ali Abdaal when he says that productivity requires us to do something we find joyful and fulfilling.

As a beginner, you don’t know about the fields in an industry. The best way to learn is to search for it. Do a precise Google search of “Which fields exist in Software Engineering” and examine the results. Make categories based on future potential in growth and finance because you don’t want to pick a dead field with no future scope.

Learn the fundamentals of each option. You will get a gist of how they work based on videos and articles concerning the topic available on the Internet. With a strong foundation, you can learn the complex concepts effortlessly. Strike a balance between theoretical and practical. Create more problems and build solutions using them.

Look at the financial future of your desired choice. Luckily, Web Development had a foreseeable future. It scaled as required. At that time, it was one of the highest-paying jobs. I selected it for the same reason.

Passion and Interest are pointless if you cannot make money. It’s like building a loss-making business without the potential to grow.

Here are a few roadmaps or guides with the names of central technologies that I believe have potential in the future. Furthermore, do your research. I don’t know you, your skillsets, or your past. Choose the right fit for yourself.

Web Development

Blockchain Development

Data Science

Mobile Development

Desktop Development

Game Development

When

Most people know what they want to do. They have the perfect plan and the best roadmaps on the Internet from the most experienced engineers. Yet, they fail to take action because of an excuse.

Here are a few steps to take consistent actions —

Set a time to learn and practice every day for at least half an hour.
Interact with other engineers on platforms like Twitter (X) and share your knowledge.
If you want to build something, put it in a to-list and assign a deadline.

The best time to learn was yesterday, but you can still conquer today. Take the necessary steps after reading this article. Go to the documentation of the language you wish to learn or buy the Udemy course you always wanted to learn.

Watch the course daily for a blocked duration and practice while watching those videos. Focus on being practical because there’s nothing more vital than knowing how to fix a bug that most engineers cannot.

Experience and a spark to explore for whatever purpose bring you the leverage to build whatever you want. Make things easier for you. Don’t make big goals that overwhelm you. Instead, improve yourself and achieve your goals with slight (0.1%) progress daily.

Practising daily helps more than you can imagine. With fundamentals, you can also take advantage of Artificial Intelligence tools.

What to look out for

The first lines of code you write by yourself will seem difficult. For the same reason, experienced engineers suggest picking a field with a minimum entry barrier, like Web Development. Don’t get scared or frustrated. Remember, we all have been there. Instead, focus on reading and learning more. In the SWE world, the resources are abundant.
Don’t jump to complex concepts or techniques. If you know how to write a for-loop, it doesn’t mean you can deal with data structures and algorithms already. It takes time to make progress. Avoid overwhelming yourself. Focus on the basics.
Avoid finding an answer directly. Spend a few hours, if not days, to understand why a specific bug or error keeps appearing in your code. Find the root cause. When you know why a problem occurs, it’s easier to solve it.
Avoid directly writing code. When you are assigned a problem, start by building a strategy. In Interviews, the employers test your thinking process. Before writing code, I design a flowchart or mindmap of how to solve a specific problem and what to use.
Take a break. Whenever I encounter a bug that overloads my cognitive ability to think and solve, I go on a small ride to the nearest cafe and spend time with my friends. I kept myself distracted from work and came back with a fresh mind.
Avoid copy-pasting code. If you ask an LLM for a code snippet, you must understand the logic before you use it. And while using it, try to write the entire code yourself and explain each keyword with their usage. It’s tempting to ask GPT models to write code. However, you are at the stage of learning, not implementing.
Use GPT models to explore and expand your avenues. I once saw a code snippet on Twitter about a JavaScript-related trick. I couldn’t understand specific pieces of the logic. I asked ChatGPT to explain the purpose of a combination of operators together and fill the necessary gaps to understand the code snippet.
Avoid excessively learning and start building. The main joy of being an engineer is to help others create their projects and allow them to help you create yours. Contribute to open-source and build open-source projects. Your theoretical knowledge will solidify and stay with you for the longest time when you practice and implement it daily.
Start by building smaller projects. Again, don’t overwhelm yourself. When I decided to learn the Swift language, I built a Pomodoro Timer for Apple Watch, Apple TV, and MacBooks. I started small and took baby steps.
Reflect on your mistakes and fundamental gaps in your learning. There are situations where you cannot implement a specific feature using a technology. At that point, write down the technology and features you failed to implement. After a bit of time, revert and start working on that gap. I couldn’t work with component libraries, so I took a project that allowed me to use those component libraries and build a project.
Build valuable connections. Life goes beyond work. I focused on only making friends who could help me earn more money. It made me shallow because I didn’t interact with them. I wasn’t friendly. I began treating everyone as a friend who is valuable to my career, but not limited to that, and became a positive person. I shared my problems; they shared theirs. We fixed bugs together, taught concepts to each other, etc.

To succeed, you must try, fail, and then retry. We’re all humans. And that’s why we should give ourselves time to adapt to problems we face today with the knowledge of yesterday.

If you want to contribute, comment with your opinion and if I should change anything. I am also available via E-mail at hello@afankhan.com. I'd love to get your feedback through the comments section.

How to create IIFE functions in JavaScript?

Afan Khan — Fri, 29 Dec 2023 13:51:49 +0000

Introduction to IIFE

I’m sure most people aren’t aware of the IIFE concept in JavaScript. It stands for Immediately-Invoked Function Expressions (IIFE). They were popular during the ES5 era for their infamous solution to the hoisting problems in JavaScript.

IIFE represents functions that execute the statements within them immediately without a function call. They do not have a function name for JavaScript to invoke it. It runs the code statements once the JavaScript engine discovers the function definition.

They are like the criminals that start shooting randomly without any prior warning in the air once they get caught.

It acts like any other statement inside JavaScript that executes once the engine scans it but inside a function. One can even declare them as asynchronous functions for those backend operations whenever required.

I launched a new free eBook!

The eBook is a 4-step framework to build projects and learn skills that enable you to attain practical experience in your field and become a developer whom recruiters and clients cannot say "No" during the discovery call.

https://afankhan.gumroad.com/l/build-to-solve-problems

Why use IIFE?

You can use the IIFE pattern whenever you wish to execute non-repetitive code lines that are not required in your program later and avoid populating the global namespace with unnecessary global variables.

Since variables cannot escape the block scope of a function except variables declared using the var keyword, the temporary IIFE function allows them to stay trapped as local variables. It is precisely helpful in Functional Programming.

"use strict";

// Function Declaration

(function () {
  const password = `uVkJa@^FmAHG7QW$(B+j`;
  console.log(`User's social media password: ${password}`);
})();

// Arrow Function

(() => {
  console.log(`This is the functional expression version of an IIFE`);
})();

// Asynchronous Arrow Function

(async () => {
  await fetch("https://api.quotable.io/quotes/random")
    .then((res) => res.json())
    .then((data) => {
      console.log(`Random Quote (Only Once): ${data[0].content}`);
    });
})();

We must precisely wrap a function declaration or arrow function with or without the async keyword to define an IIFE function. Once the engine reaches the function definition, it will execute the statements inside the function and discard the local variables after their usage.

It disappears after the first execution. You must also add () after closing an IIFE for JavaScript to understand this anonymous function. The function is still an expression and will not execute instantly without inserting the parentheses.

It’s not a feature but a pattern developed by engineers using JavaScript. IIFE isn’t used often in JavaScript anymore because the ES6-based const and let keywords create custom block scopes inside a code block.

Before ES6 and so far, many people utilized var, and IIFE makes sense for them. Variables with var are accessible outside standard code blocks because of a concept called Hoisting, and developers created this pattern to prevent the data from merging with the remaining variables in the global environment.

If you wish to invoke a function once besides its global namespace benefits, the IIFE design pattern is your best bet.

That's it. If you want to contribute, comment with your opinion and if I should change anything. I am also available via E-mail at hello@afankhan.com. Otherwise, Twitter (X) is the easiest way to reach out - @justmrkhan.

I'd love to get your feedback through the comments section.

What is Inheritance and the Prototype Object in JavaScript?

Afan Khan — Thu, 07 Dec 2023 15:57:27 +0000

Most developers don’t know that the beloved scripting language also has secured OOP paradigm capabilities under its belt. These are features that JavaScript developers should know, but they don’t.

Irrespective of how JS implements these features, they work like a scripting language with strange quirks behind the scenes.

JavaScript never ceases to amaze me, and I don’t want to keep all this to myself. Let’s begin by understanding the concept of Inheritance and JS’ approach towards it.

Inheritance

The Inheritance implementation in OOP-based languages, like Java, differs from JavaScript. Those languages were programming languages since their inception.

However, JavaScript stems from a different pair of roots. It implements all these features in a strange ritual and has various operations in the background to make those features possible.

JS requires workarounds to implement such features because Brendan Eich did not want it to operate like an OOP-based language. However, the concept of Inheritance for Java and JavaScript remains the same.

The primary Inheritance idea is to pass down properties and methods of a class to another new child class or object without creating duplicate values.

Why use Inheritance?

Assume there is Class A and Class B. If class A has a property that class B requires, then Class B can create that property again. But that would be repetitive and a violation of the DRY principle.

Software engineering is all about reusability and readability. If developers create duplicate variables, fellow engineers and themselves will face problems understanding the logic and where those variables reside.

That’s why we use Inheritance. It allows child classes and objects to inherit properties, values, and methods from parent classes and objects that have them already to avoid writing the same logic repeatedly.

For OOP-based languages, Inheritance is a way to securely grab values from one class to another, as each class represents a component or feature in the application.

Similarly, when your grandparents or parents are wealthy, your requirements to work hard are significantly lower because top-level members satisfy those requirements already.

When parents are wealthy, some children continue their legacy while others inherit and enjoy their lives. It is optional to have more properties, not the real estate ones, but the ones in objects, after inheriting some of them, which is the same in programming.

Child classes serve more purpose even after inheriting properties and methods from parent classes.

How is Inheritance implemented in JS?

JavaScript is not an object-oriented language. Inheritance is derived from languages like Java, C++, and others because they require Classes to write any code.

They preach the idea of secure code. To write a print statement in Java, you write them inside Classes, so the requirement of Inheritance there becomes viable.

Typically, developers use classes with constructors to implement Inheritance in those languages with zero object requirements.

However, JavaScript desires to stay unique. It uses objects to implement Inheritance. That’s standard for JavaScript developers, but OOP-based developers perceive it as a nightmare.

Trust me, objects are a part of a massive syntactical sugar play. JavaScript implements it using a mechanism called Prototype alongside a few constructor functions.

First, I will explain Inheritance with Classes in JavaScript since most developers are familiar with it concerning classes in languages like Java. I will also explain the purpose of Classes for a bit more background.

What is class-based Inheritance?

The coding world would look difficult without a class for OOP developers. Anyone would hate writing duplicate code. For instance, look at the following example.

"use strict";

// Model 1 of Porsche
const car1 = {
  brand: "Porsche",

  model: "911 GT3",
  topSpeed: "318 KM/h",
  acceleration: "3.4",

  carDetails: function () {
    console.log(
      `This is a ${this.model} by ${this.brand} with a top speed of 
        ${this.topSpeed} and accelerates from 0 to 100 KM/h in 
        ${this.acceleration} seconds`
    );
  },
};

// Model 2 of Porsche
const car2 = {
  brand: "Porsche",

  model: "718 Cayman GT4 RS",
  topSpeed: "315 KM/h",
  acceleration: "3.4",

  carDetails: function () {
    console.log(
      `This is a ${this.model} by ${this.brand} with a top speed of 
        ${this.topSpeed} and accelerates from 0 to 100 KM/h in 
        ${this.acceleration} seconds`
    );
  },
};

car1.carDetails();
car2.carDetails();

I created two objects for two cars from the same brand - Porsche. You can notice the repetitive properties and methods between both objects.

The brand name, acceleration property, and the carDetails() method are the same in both objects. There's no difference in their values or syntax. It is called Code Duplication.

The property values, such as acceleration, might change later, but the carDetails() method will display the same properties and remain unmodified. Why should we duplicate and keep it in two places if we cannot modify the method? That is why the world introduced Classes.

Classes allow us to write the template and boilerplate for such scenarios. We can insert the names of properties and write functions, like carDetails(), inside them using those properties.

Based on the details from these classes, developers create objects, which are instances of Classes.

Objects copy the barebone details from Classes and modify them to their needs and uniqueness. Not only duplication, but if you wish to alter the carDetails() method, there is no unified approach.
Only one method inside one object will get modified at a time.

I am sure you do not dream of sitting and implementing the same modifications to each similar object on a chill weekend. Hence, let me turn the above code into a version that uses a class. I'm sure you are starting to see the purpose of Inheritance.

class porscheCar {
  // Constructor
  constructor(carModel, carTopSpeed, accl) {
    this.model = carModel;
    this.topSpeed = carTopSpeed;
    this.acceleration = accl;
  }

  // Default Brand Name
  brand = "Porsche";

  // Display Function

  carDetails() {
    const result = `This is a ${this.model} by ${this.brand} with 
    a top speed of ${this.topSpeed} and accelerates from 0 to 100 
    KM/h in ${this.acceleration} seconds`;

    return result;
  }
}

// Creating new Objects of porscheCar Class
const car1 = new porscheCar("911 GT3", "318 KM/h", "3.4");
const car2 = new porscheCar("911 GT3", "318 KM/h", "3.4");

console.log(car1.carDetails());
console.log(car2.carDetails());

We had two problems - Code Duplication and the need to modify multiple objects and their methods by hand. We solved the first problem, but we will need to fix the second problem.

We cannot modify the methods of the objects belonging to a class directly. We cannot do car1 = function() {} because it would only update car1 and not car2 together. That would require us to modify the class.

However, before we tackle the second problem, I want to talk about extending classes. We're diving deeper into the Prototype mechanism to modify the objects together through code and not manual modifications.

But what if I had another class called mercedesCar and wanted the same properties and methods with other unique values? As I explained earlier, we have to avoid code duplication.

Hence, we will use the extends keyword in JavaScript that passes down the properties and methods of porscheCar to mercedesCar and perform Inheritance. Remember that we still need to solve the second modification problem, but I will tackle this first because I prefer Benz.

Extending Classes

Traditionally, this is how Inheritance would take place in other languages using the extends keyword.

class mercedesCar extends porscheCar {
  constructor(carModel, carTopSpeed, accl) {
    super();

    this.model = carModel;
    this.topSpeed = carTopSpeed;
    this.acceleration = accl;
    this.brand = "Mercedes";
  }
}

const mb1 = new mercedesCar("300 SLR", "290 km/h", "7.7", "1955");
console.log(mb1.carDetails());

The constructor takes the information from the parameters while creating the object and delivers it to the extended parent porscheCar class.

Constructors inside classes initialize an object and assign unique values for the boilerplate inside classes. The super() method invokes the constructor of the extended porscheCar class and is necessary because we try to access the variables of porscheCar inside mercedesCar.

If we do not include super(), we cannot use the this keyword to access and assign new variables to the porscheCar class.

We need to access and assign values to the porscheCar class because the carDetails() method belongs to the porscheCar class.

The carDetails() method requires the model name, top speed, brand name, and acceleration data of the legendary 300 SLR to print to the console.

Therefore, we used super() and provided the value for its properties using the constructor. I created an instance of the mercedesCar class and invoked the carDetails() method even though it belonged to the porscheCar Car class because I had called super() to deliver the values of Mercedes to Porsche 🏎️.

Prototype

JavaScript is different. It doesn’t like the standard behaviour of the class and extends keywords. It does something else under the hood even though it uses the class keyword.

In the example above, I inherited the methods and properties of one class to another, which is the traditional approach. But now, let us revert to the second problem we had earlier.

We had two objects called car1 and car2 separately and then transferred to the porscheCar class to solve the first problem of code duplication.

After creating the class and initiating those objects, I wanted to modify the statements inside the carDetails() method. However, I cannot assign a new function because I use a class to wrap those objects and methods. They are secure and cannot be modified directly.

car1.carDetails = function() {}...

It will not work. The car2 object will still have the old carDetails() method even if, theoretically, someone modifies the carDetails() method inside the car1 object.

In other languages, you can modify the methods of an object independently because those languages create a copy of everything inside a class and give that to its objects. We can do that in JS but with its disadvantages.

We cannot modify the method of any object related to a class because those methods do not belong to the objects in the first place. In Java, after building the same foundation for both objects using the boilerplate code in a class, I could if I wanted the method in car1 to stay different from car2.

We cannot do that in JS because it doesn’t copy the contents of a class and give it to the object. Instead, JavaScript lends those methods inside the class to those objects through a reference. In reality, those methods still reside inside the class and are given for rent to its objects while they want.

It is called the prototype mechanism. Each object has an interlinked copy object called its prototype. Each object has its prototype, and other objects cannot modify it.

A prototype of an object or value is a copy of the properties and methods present inside the object.

In the same way, a Class has a prototype of its own. This prototype gets shared with each object inside it, and those objects can use that to invoke methods and play with its properties but not modify it.

I must modify the prototype of the porscheClass class if I want to solve our second problem of changing the methods of a Class. These changes should appear for each object.

porscheCar.prototype.carDetails = function () {
  const result = `You are looking at ${this.brand}'s 
    ${this.model} with a top speed of ${this.topSpeed} and 
    swifts from 1 to 100 KM/h in ${this.topSpeed} seconds.`;

  return result;
};

console.log(car1.carDetails());
console.log(car2.carDetails());

The code for the class and the creation of car1 and car2 remain the same. I modified the string inside the carDetails() method using the prototype property binded to the class.

That property allows us to access the properties and methods of the respective class and alter them outside the class. It isn’t secure at all, and I know the OOP folks are shouting at me virtually through the screen, but as I said, JavaScript is not for this.

The class keyword is simply sugarcoating the concept of OOP. Developers requested that keyword. On the face of it, they gave the feature. But under the hood, the Prototype mechanism initiates the objects and shares the properties and methods of the classes with its properties instead of giving them a copy.

Objects initiated using Classes can have unique properties when their properties inside the class initialize using the this keyword because that keyword refers to each object individually and not as a whole.

Therefore, I will get the properties of car1 returned as an object because they are uniquely defined. However, the carDetails() method will remain in the prototype because that method is typical for each object, including car2.

The [[Prototype]] represents the Prototype object and belongs to the porscheCar class. The square brackets represent an object that cannot be modified.

It is how JavaScript represents Prototypes objects, but there’s also __proto__. However, it is deprecated and controversial, so I will let it stay in the shadows.

Constructors and Classes

Try to observe the following code. Maybe there’s not more than an empty object to observe. And still, the output has a Prototype with selective methods even though the object is empty.

console.log({});

The JavaScript language has a set of default methods for each object in the language to access and use. You can use them even if they are not explicitly defined. As I explained earlier, each object connects to a copy of itself and creates a Prototype chain.

Each empty object points to an unnamed object, and your objects inherit properties and methods from that nameless object. It happens because each object in JavaScript is an instance of a class named "Object" with a capital "O".

Each object in JavaScript inherits the Object constructor information or class and displays that irrespective of whether the object has anything inside it.

You will find the default properties of the Object class because car1 is an object after all if you try to access the Prototype of the car1 object Prototype. It does not work with Objects only, and the same principles apply to Arrays.

And finally, the object-based inheritance.

Object-based Inheritance

In JavaScript, there are a few ways one can initiate an object. We have been using the first and most preferable approach throughout this article using the {} object literal. However, we can also create them using a function. Take the example below.

function createBenz(modelName, brandName, engine, releaseYear) {
  this.model = modelName;
  this.brand = brandName;
  this.engine = engine;

  function returnDetails() {
    console.log(
      `You are looking at ${this.brand}'s ${this.model} with a 
       ${engine} engine`
    );
  }
}

const mb2 = new createBenz("S-Class S680", "Mercedes Maybach", "V12");
console.log(mb2);

It only happens using the function keyword using the Function Declaration approach. The arrow functions and function expressions cannot become a part-time object constructor.

Furthermore, I will try to access the prototype of this object that I initiated through a constructor function.

const mb3 = new createBenz(
  "S-Class S680",
  "Mercedes Maybach",
  "V12"
);

createBenz.prototype.returnDetails = function () {
  console.log(
    `You are looking at ${this.brand}'s ${this.model} with a 
      ${this.engine} engine`
  );
};

createBenz.prototype.greetCustomer = function () {
  return `Welcome to Mercedes Benz 👋`;
};

console.log(mb3);

The object prototype now holds the new greetCustomer() and returnDetails() method. It is how we can use Inheritance with objects. It marks one of the possibilities. I created another instance of createBenz() without a class and inherited its methods and properties into an m3 object.

const mb4 = new createBenz(
  "C-Class C250",
  "Mercedes Benz",
  "2.2-liter BlueEfficiency"
);

createBenz.prototype.returnDetails = function () {
  console.log(
    `You are looking at ${this.brand}'s ${this.model} with a 
    ${this.engine} engine`
  );
};

createBenz.prototype.greetCustomer = function () {
  return `Welcome to Mercedes Benz 👋`;
};

console.log(mb3.returnDetails());
console.log(mb3.greetCustomer());

Prototypal Inheritance

As I said before, objects are used alongside prototypes in JavaScript to achieve Inheritance. That is correct, and is called Prototypal Inheritance.

Except for the extending class section, I demonstrated the examples of Prototypal Inheritance with the porscheCar and mercedesCar classes without telling you because, under the hood, JavaScript uses Prototypes, constructor functions as shown in the object-based inheritance sections, and objects themselves to perform Inheritance.

It is by default Prototypal Inheritance even though it may appear as standard Inheritance using classes, but the reality hides behind objects.
The concept of Classes in our context is sugarcoated. Those keywords from other languages allow us to add an abstraction layer on top of the actual functionalities of JavaScript.

Those keywords, like class and constructor, are easier to read and write prototypes and Inheritance with objects. The syntax of Prototypes and objects is strange and baffling to understand.

Hence, JS has a layer that covers Prototypal Inheritance and other concepts with keywords that seem relatable and relevant from other languages. They perform almost the same functionalities. However, they are different in JavaScript because of its design.

The syntax to write Classes came in ES6 even though prototypes and objects controlled its functionalities. The keywords performed their job like in other languages to a standard developer.

Under the hood

When you create the porscheCar class, JavaScript creates a constructor function beneath the syntactic sugar. It initializes the desired properties and methods within the class prototype after building the porscheCar class.

// Creates the constructor function
function porscheCar() {}

// Creates the methods inside the Prototype
porscheCar.prototype.displayBrand = function () {
  console.log(`Brand: ${this.brand}`);
};

// Creates an Instance of the constructor
const car1 = new porscheCar();

// Creates the unique property for each object
car1.brand = "Porsche";

// Invokes the method through the Prototype
car1.displayBrand();

The output is — Brand: Porsche. The object-based Inheritance had a similar example. I used a standard function as a constructor function when I attached it with the new keyword.

I created a new method inside the prototype of the constructor function. Each object will inherit this prototype with its method, such as displayBrand().

JavaScript creates properties with unique values for each object once an instance or object gets created. These are not a part of the prototype because I used the this keyword, and that keyword always points to the owner object and not a class.

The properties are for the object, so they remain unique. Further, they derive it from the constructor function Prototype when developers invoke its methods.

Inheriting Properties VS Methods

Allow me to explain this further. As I stated earlier, the properties and methods belong exclusively to the object because that is how the this keyword works instead of focusing on the constructor function or the class.

We directly attached the displayBrand() method to the constructor function prototype. However, you can eliminate the default prototype behaviour by using the this keyword while making the methods inside the class or constructor functions if you want these methods to stay exclusively unique for each object.

I hate using constructor functions. Let me show the difference using a standard class.

class atomicHabits {
  author = "James Clear";
  bookName = "Atomic Habits";

  constructor(rating, comments) {
    this.ratingOfBook = rating;
    this.extraComments = comments;

    this.displayProperties = function () {
      return `The ${this.bookName} book by ${this.author} has a rating of 
      ${this.ratingOfBook} and "${this.extraComments}" extra comment(s).`;
    };
  }
}

const reader1 = new atomicHabits("4.8", "N/A");
const reader2 = new atomicHabits("4.95", 
                                 "One of the best productivity books!");

console.log(atomicHabits);
console.log(reader1);
console.log(reader2);

console.log(reader1.displayProperties());
console.log(reader2.displayProperties());

The author and bookName properties are outside the constructor because I don’t need input from the user about the book author and name.

I have to attach the displayProperties() method to each object without using the atomicHabit class prototype to make it unique for each object.

We require a constructor, method, or accessor to use the this keyword inside a class. I will avoid explaining getters and setters right now. Since I cannot use the this keyword outside the constructor, I defined the displayProperties() method using the this keyword inside the constructor itself.

Now, the method will convert into a property and get attached to each. And this is precisely the difference between properties and methods. You target each object individually using the this keyword. Otherwise, you can define a function as a standard method each object inherits. You cannot modify it when the method is not an explicit property of the object.

The author and bookName properties are not a part of the prototype but are unique to each object even without the this keyword attached to them. I didn’t use the this keyword because I am not creating and initializing it with a new value.

However, the displayProperties() function is now a property instead of a method. You can modify it for each object manually to perform different operations for various objects, and the properties remain changeable.

The displayProperties() method is now a part of each object, and you can manually change it for one of the objects. Instead of inheriting the methods, these objects inherit them as properties. You can modify them now.

It can also be a disadvantage. If you want to modify the method in multiple objects, you must alter them manually. It brings the second problem back. Hence, we only use them in specific scenarios and prefer prototypes in others.

reader1.displayProperties = function () {
  return `Changed without prototype! This will not change reader2 object!`;
};

console.log(reader1.displayProperties());
console.log(reader2.displayProperties());

I changed the method for the reader1 method without modifying the prototype and allowing the reader2 object to remain stable.

The syntax and implementation seem like Java now. It means I should start packing my bags. See you, lads.

What are taints and server actions in NextJS 14?

Afan Khan — Tue, 28 Nov 2023 10:28:32 +0000

Introduction

NextJS and its developers are prioritizing security. It’s time to understand the importance of data and the consequences. Most people are worried whether NextJS 14 will be problematic to implement.

Many recently migrated to the 13th version that introduced the App Router, and people are worried whether this new update will cause them to switch again. However, experienced developers are stress-free.

This release did not excite them. It did not prompt them to jump out of their chairs. The updates remained insignificant for some, and the lack of new APIs exhausted people.

But that doesn’t indicate whether the release was utterly worthless. We have a few amusing features, and I will cover two of them in this article.

Let’s understand Server Actions and Taints. I found people talking about them and insulting Server Actions, originally on Twitter. Later, I heard Theo talk about them in his videos referring to the NextJS Conf.

So, naturally, I started to get into the rabbit hole of this new update, and here’s what I found.

Server Actions

Server actions represent a function that allows you to write server-related code inside of code that looks like client code. Wait, WTF does that mean? It represents a set of actions inside a function that will run on the server but in a syntax that seems like you are writing client-side React components.

Server actions are called straight from your React components. Vercel describes it as a function that runs securely on the server directly from your React components to avoid writing manual API routes or route handlers.

NextJS is trying to add more security features to your codebases and applications. While server actions allow you to write code that will execute on the server, you can not put it inside client components because they avoid sending data to client devices while improving the developer experience. All of that is for security.

You’re solely writing code that will execute on the server, like fetching data from a database, in a client-side fashion for simplicity and security reasons.

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }

  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Take this code example from the documentation. For now, this code is secure because the JavaScript remains strictly on the server as we are using server actions.

However, this code will breach the policies of server actions and the entire security tantrum if the code in the return statement remains visible to the user since it incorporates the information stored in a function outside that statement.

Server Actions hide the information of those outside functions and only make the HTML visible to the client.

The code snippet is a server component, and except for the <form> HTML element, which will get sent to the client’s device, the entire JavaScript in the file remains in an imaginary vault and avoids exposing itself to the client.

When the user clicks submit, the application pings a post request to the mentioned endpoint using ordinary web standards instead of AJAX, fetch, or anything remotely similar.

Most people confuse back-end-related server action functions for APIs with the code inside the return statement defining the static front-end HTML markup because it is a JSX front-end file. However, JSX files and components are not client-side oriented anymore.

It is something that the user will see, but the JavaScript will not get sent to the user. By the way, this is not a new concept either.

Server actions have been around for quite a while now, and I’ve used them multiple times in my applications, but they are finally stable. There’s a significant difference in whether a code should get into production based on the status of the features and whether they are stable.

Vercel deeply integrated Server actions with the App Router, which will help people using NextJS 13. You can redirect to different routes using the redirect() method, set and read cookies using the cookies() method, etc.

Taints

As I stated earlier, Vercel is prioritizing security. The name “Taint” is a ploy to attract more people towards this new concept that promotes security. However, simply put, it is an experimental feature in the form of an API that allows specific objects to avoid getting pushed to the client side.

The rendering process of React begins with a plain HTML file with only a script tag. Then, it re-renders the empty HTML page and loads all the components with actual data, which is the process of hydration.

During this loading phase, attributes get inserted into HTML elements dynamically. Some of these attributes are confidential. React and Next insert fields or private attributes inside HTML elements to identify which actions to execute and what context or data is required to run those actions.

These actions could be fetching data from another source in the same application, getting data from a database, or working with an API. We don’t want our tokens to appear on HTML elements for server actions to operate appropriately. We want them hidden. We want them to be private. I don’t want my account to get hacked this easily. Therefore, taint exists.

The basic idea is to avoid large objects accidentally getting exposed to the client. You can enable taint through the next.config.js file.


module.exports = {
  experimental: {
    taint: true,
  },
};

Now, you can mark objects that should not get passed to the client side using the experimental_taintObjectReference(message, object) method.

import { experimental_taintObjectReference } from 'react';

export async function getUserData(id) {
  const data = ...;
  experimental_taintObjectReference(
    'Do not pass user data to the client',
    data
  );
  return data;
}

The taint feature allows the returned values to remain secure. If trying to make files explicitly limited and only accessible on the server, not the client, we can use import 'server-only'; on the top of those files. It will not allow anyone to import those files and export its modules.

If you try to import the getUserData() function from the above code snippet into another file, you cannot use the object directly due to security concerns. The following code snippet will fail to execute.

import { getUserData } from './data';

export async function Page({ searchParams }) {
  const userData = getUserData(searchParams.id);
  return <ClientComponent user={userData} />;
}

However, developers can still access and extract data fields from the object and pass them along.

export async function Page({ searchParams }) {
  const { name, phone } = getUserData(searchParams.id);
  // Intentionally exposing personal data
  return <ClientComponent name={name} phoneNumber={phone} />;
}

Intentially, we can expose the personal data to the client side by extracting those data fields and destructuring the object.

The above code snippet will only extract the specific required data, like the name and phone number, while the rest remains untouched and sacred in an imaginary NextJS vault.

Not only objects, but specific values, such as tokens, can also remain hidden from the client device using the taintUniqueValue(errorMessage, object, value) call with an additional parameter. It is the value in strings, numbers, etc., after the object argument. However, taint cannot block derived values.

import { experimental_taintObjectReference, experimental_taintUniqueValue } from 'react';

export async function getUserData(id) {
  const data = ...;
  experimental_taintObjectReference(
    'Do not pass user data to the client',
    data
  );
  experimental_taintUniqueValue(
    'Do not pass tokens to the client',
    data,
    data.token
  );
  return data;
}

Taints can still get messy, and people can go over it. Instead of relying on them, you can combine taints as an additional layer of protection on top of something like a Data Access Layer.

What Else?

Don't get stressed about migrating your applications from NextJS 13 to 14. Most people will not use these new features, except the stable server actions, because we have been using them unknowingly for the longest time.

It is simple to migrate and not necessary. The rest is on you. I will cover partial pre-rendering in a separate article. It is another new technique introduced in NextJS 14. They also spoke more about the NextJS Compiler with Turboback. It is their rust-based bundler for JS and TS.

However, the compiler is unstable because it is not passing all the tests, so we will let developers smash their heads against it for a while.

Nevertheless, Vercel also released React Learn, a course in the form of a book, trying to educate people about NextJS 13 and the basics of React to allow them to migrate from other languages effortlessly.

Besides, uneducated people are also hating server actions for apparently reasons that arise from their lack of knowledge. In the NextJS Conf, the presenter displayed a slide explaining server actions with an open SQL statement using external values, like a slug, to use the insert statement for an SQL DB.

However, the presenter used a specific in-built feature of TypeScript, which they did not cite in the slide, and that feature allows functions to be called using template literals and avoid the rest of the string. For more details on that feature, watch this.

Until then.

What are hooks in ReactJS?

Afan Khan — Mon, 27 Nov 2023 12:15:02 +0000

Sometimes, the elegant implementation is just a function. Not a method. Not a class. Not a framework. Just a function. - John Carmack. Oculus VR CTO.

When I started to learn React, I didn't read about its basic concepts. I directly jumped into writing React code because I found it trendy. However, not long into that journey, I faced the consequences of writing code without understanding its benefits.

I finally understood what Ali Abdaal meant when he said, "Learning and Practicing should be balanced together."

Nonetheless, Hooks were one of the concepts that I had skipped theoretically. I knew how to write them and where to use them, but I wasn't aware of why we use them.

I understood the intricacies of React Hooks, so you don't have to. I will help you learn what they are, why and how to use them in this article.

What are Hooks?

By definition, hooks are functions in React that allow us to access and verify specific properties of UI elements, like their current state, without writing classes, constructors, etc.

Hooks allow you to perform operations that Vanilla JS cannot. React has different built-in hooks - State Hooks, Context Hooks, Ref Hooks, Effect Hooks, etc.

You are probably writing a hook in your code when you smash a random word with the use keyword and call it a function that deconstructs an array into variables.

Hooks uses features of the React framework, like SSR, to perform a specific task from within a component. However, the hooks do not live inside your React component.

More often than not, these hooks perform basic operations, like trying to check the state of a UI element and whether the user interacted with it.

Hooks allow us to use reusable states of components without changing their hierarchy. With hooks, developers can extract the current state of a UI element, grab DOM elements, and more independently and re-use those states and information in other components without creating extra classes, constructors, props, etc.

We can also create custom hooks, which I will cover in a separate article, and for now, let us look at an example where hooks would be required. Then, we will understand why we need them and how to use them.

E-Commerce Example

Consider yourself running an E-commerce brand. You have a page that displays your product with checkboxes to select the size, colour, etc. By default, the chosen choice is the first choice.

If you want to check whether the user has selected a different choice, you require something directly into your component that verifies the current state of those selection boxes. A hook allows you to do that, specifically, the useState() hook.

Therefore, the useState() hook returns the current state of UI elements and performs specific operations accordingly. These actions may include changing the product URL and attaching queries for the user to share.

There are more hooks. If I want to select HTML elements from the DOM, I can use the useRef() hook. If not using React, I would pick the elements with the querySelector() method, etc.

React hooks represent those operations that could work manually without a framework, but the complexity of frameworks wouldn't allow us to continue doing so. Thus, we efficiently implement those basic operations and insert additional benefits.

Of course. Before hooks, developers accessed the state of UI elements and other details, but the downside of those features was writing extra code.

Let's see why the React team introduced hooks and what developers used before them to access the states of UI elements.

Why use Hooks?

Nowadays, websites aren't static. There are buttons, checkboxes, text input boxes, crazy animations, etc. A lot is going on at the same time. Developers require various techniques to keep up with these changes in the UI elements and manage them accordingly.

They require various features in their choice of frameworks to swiftly grab user input, such as scrolling behaviour by writing less code. They want to select HTML elements, access their states, receive information from parent elements, etc.

In those cases, we use hooks. Whenever there's a change, the useState() hook keeps track of those changes and gets user input. Whenever you want to grab information from parent nodes and pass that information as props to child nodes, you can use useContext(), and so on.

However, if you think about it deeply, developers had to grab user input even before the React team introduced hooks. React released Hooks in React 16.8 in early 2019.

So, what did developers use before 2019?

At that time, React implemented features in ways that most developers hated. They forced front-end developers to use constructors inside classes with render props for the application to understand the current state of various UI components and use the data provided by the user to perform given actions.

Hooks allowed React developers to eradicate class-based components and directly render the UI with stateful logic and dynamic data from functional components. These functional components were not "dumb components" anymore.

The implementations of React class components were on the pure JavaScript syntax, and its Vanilla implementation inherited the disadvantages of JavaScript classes, including the excessive use of the this keyword.

React didn't bother to create a class system either. They said they were not in the business of building a class system and further adopted the default system of JavaScript. All of these problems combined led to the following code.

This is a small example of a class-based code snippet from Fireship trying to increment the count stored in a state wherein the user clicks on the button and displays the current count via an HTML element to the user.

The classes and constructors before early 2019 started to give Java vibes. Back then, only React class components handled states and other DOM-based functionalities. The functional components were merely responsible for displaying information to the user through UI elements.

Functional components till 16.8 received data in the form of props from parent components and precisely displayed them to the user. Developers hated React for that approach. So, React decided to introduce Hooks.

Grabbing data from parent elements, attaining states, and other features were delegated to Hooks.

Oh, and by the way, A state in React keeps track of how data changes in the application. It holds data in different forms that belong to a UI element. For example, it could store user input whenever the user types inside a textbox.

Before Hooks, React was a mess compared to the advancements of today. Classes and constructors led to a wrapper hell. We had to pass a component into another component, and so on.

Developers claimed frameworks provided seamless experience and faster performance.

The entire idea of writing a class with other "yada yada" render props and high-order functionalities to solely check if a user selected a checkbox option contradicted their claim that frameworks were better than plain Vanilla JS.

I wonder why Java developers found themselves inferior. So, the React team decided to step up their game. They introduced hooks that allowed us to access the state of UI elements through functions within React components without being in the same context of a framework.

How to use them?

For starters, you cannot create hooks everywhere. You can only initialize them in the top level of a component.

You cannot initiate them inside loops, conditionals, nested functions, etc. Otherwise, you can initialize them inside custom hooks strictly.

import "./App.css";
import { useState } from "react"; // Import the hook

function App() {
  const [names, setName] = useState("Afan"); // Initialize the hook

  return (
    <div className="App">
      <p>{names}</p>

      <input
        type="text"
        placeholder="Enter your name"
        onChange={(e) => {
          setName(e.target.value);
        }}
      ></input>
    </div>
  );
}

export default App;

I used the useState() hook in this example. It keeps track of the current state of a UI element. When the state changes, we use the setter function provided by the second deconstructed array element named setName() to set a new value to the first deconstructed value.

The useState() hook simultaneously re-renders the UI element whenever the state of an element changes to update the UI elements using the data provided by a hook. The first variable in that hook array stores the data, and the second one is a setter used to collect the information from the UI element.

useState() solely accepts one optional parameter, which is the default value of the state. In other words, Afan is the default value of the <p> tag and other UI elements using that hook to display values. This default value can be in strings, numbers, empty arrays ([]), empty objects ({}), etc.

During the days of Classes and Constructors, objects represented the initial default value. Nonetheless, the brackets are required when initializing a hook. Those brackets represent the concept of Array Deconstruction.

However, the variables inside those brackets aren't arrays. We can use multiple hooks in the same component. Mostly, we use useState() to keep track of the user input through a form. Forms contain more than one field. Hence, we can initialize multiple hooks with different variable names and initial values at the beginning of the component function itself.

Similarly, you can initialize other hooks. All components using the same hook in the same file are also re-rendered whenever the state of that UI element changes.

Every component that uses the data stored in the state will get re-rendered along with the entire page. React will modify and update those components together. Developers will not manually select each HTML element. Instead, React with its Babel will do that for us to update those components.

Furthermore, hooks are asynchronous. If you try to call them multiple times, they will only re-render the component once in specific scenarios.

import "./App.css";
import { useState } from "react";

function App() {
  const [names, setName] = useState("Afan");

  function updateP(e) {
    setName(e.target.value + "HEY");
    setName(e.target.value + "HELLO");
    setName(e.target.value + "HOWDY"); // Only this setter function called
  }

  return (
    <div className="App">
      <p>{names}</p>

      <input
        type="text"
        placeholder="Enter your name"
        onChange={(e) => updateP(e)}
      ></input>
    </div>
  );
}

export default App;

I created the updateP() function inside the main App() function component and called the hook from that function. I invoked it three times, but only the last one executed and appended HOWDY to the modified string when it re-rendered.

I earlier claimed that hooks cannot reside inside functions, loops, etc. So, how the heck am I using them here? Well, you can invoke the setter function of the hooks inside functions, but you cannot create hooks inside functions.

You can only create them at the top level of the component function. However, if you want the current string value to get appended with the previous value and invoke the setter function three times synchronously, you can use a callback function inside it.

import "./App.css";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  function updateP() {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
  }

  return (
    <div className="App">
      <p>{count}</p>

      <button onClick={updateP}>Increase</button>
    </div>
  );
}

export default App;

This example uses the default value provided in the hook. When the user clicks the button, the function updateP() gets invoked, and the count changes.

Since I passed a default value present inside the useState() hook, those setter functions can use them and keep updating the previous value when I pass them as parameters.

Inside the button, the function call doesn't require parenthesis. Otherwise, the entire application will enter an infinite loop of function calls. If the parenthesis is attached, the function will get invoked directly before the user clicks the button.

In reality, the hook data lives outside the component that renders it. It is one level outside the component. Even without the respective context, hooks allow us to access that data and restrict its usage if it is confidential since it resides outside the component.

Whenever the state of the component changes, React re-renders the entire page and delivers the data by storing it in the first array element of the useState() function.

Also, there's no strict rule about writing the names of the variables deconstructed from hooks. We use the keyword set for the setter function because it is easier for other developers and ourselves to understand.

Furthermore, we usually define those variables in combination. So, trying to get the first and last name of the user, the hook will have [firstName, setFirstName], [lastName, setLastName], etc.

It is simply a convention commonly used by React developers while writing hooks to make them easily readable and understandable.

Without Hooks and Constructors

We understand that React recently introduced hooks in early 2019. Before that, developers used Classes and Constructors. Java developers felt inferior.

However, some will argue that we don't require constructors or hooks to take user input from UI elements and display them. We can do it directly instead. For that, let's consider a click counter-example.

I will try to directly update the values of a counter by storing them inside a variable, updating them whenever the user interacts with the component, and displaying the updated value to the user.

I will exhibit the counter variable inside the <p> tag, and whenever I click on the button, it will update the UI element with the new incremented counter.

import "./App.css";

function App() {
  let counter = 5;

  function updateP() {
    counter++;
    console.log(counter);
  }

  return (
    <div className="App">
      <p>{counter}</p>

      <button onClick={updateP}>Increase</button>
    </div>
  );
}

export default App;

However, when you try to display the new updated value to the user during their interaction with your UI elements, the count variable will get the updated value, not the component.

The counter updates inside the variable, but the UI will not update because we are not using any function forcing React to re-render the component with its new data.

There should be a trigger that refreshes the component and paints the new values.

When using hooks, React updates the variable with the data using the setter function, and developers access the updated data using the first element in the deconstructed array.

They call the hook to grab the data from within the React components.

However, both array elements are useless if React doesn't re-render the page. When the page re-renders, the new data gets displayed to the user. Since the setter functions in hooks trigger the components to re-render, the UI gets updated too.

And that's why either hooks or classes are required. Only specific hooks, like useState(), re-render the page. It is the most commonly used hooks in the majority of applications.

Instead of manually selecting DOM elements, updating the variables of each component that uses the data, and writing that much code, hooks make our lives easier.

Summary

Hooks are functions that developers can invoke or call from within React components. They can access specific information from UI elements, such as user input, grab HTML elements, provide context, etc.

The information attained from UI elements is stored one level outside the React components but within the same exported function.

Hooks allow developers to perform various operations that Vanilla JS will fail to perform. Mostly, we use specific hooks to keep track of the state of a UI element using the useState() hook.

The useState() hook allows us to access the details provided by the user or perform actions based on the interactions from the user, like scrolling through an element or clicking a button.

Before hooks, developers used Classes and Constructors. That approach required us to write more code. Therefore, the React team introduced Hooks. We cannot manually reciprocate the functionalities of these hooks, like the useState() hook.

If we try to replicate the behaviour of the useState() hook and manually update variables, the UI elements will continue to remain the same and not update because hooks cause React to re-render the entire page while keeping track of the last stored values of UI elements and their states.

Each hook has a unique proposition that solves a problem wherein Vanilla JS fails. Hooks take advantage of the features of the React framework.

And that's it.

If you want to contribute, comment with your opinion and if I should change anything. I am also available via E-mail at hello@afankhan.com. Otherwise, Twitter (X) is the easiest way to reach out - @justmrkhan.

Which programming language should I learn first?

Afan Khan — Fri, 27 Oct 2023 13:58:19 +0000

Scrap the title. It is the wrong question to ask. The real question should be the following.

In which tech field can I make the most impact and help solve problems by building projects? Is it Web Development? Is it App Development?

If Web Development, which tools and languages can I use?

Let’s answer these questions. I created different roadmaps for various fields, including Data Science. Let’s take a look at them one by one and understand the reality of Software Development.

Introduction

Even though you may want to pick your first language easily, I recommend putting in some time because you don’t want to waste your time quickly switching to another language and then repeat the loop wherein you switch languages when you lose interest.

The stakes are high. It will take hundreds of hours of practice to become good at a language, especially JS, Java, Ruby, C++, etc. You must select a set of languages, stick to them, and keep building applications using them before switching to another one.

Consider whether people will pay to build something using a specific language. For instance, take JavaScript. It gets used universally everywhere.

Hence, the market demands proficient and well-versed JavaScript developers. If you know JS, you can switch to any other high-level language.

Consider parameters like the job market, long-term vision, easiness of learning, and other factors when choosing a language. Don’t pick languages like C as your first if you want an easy language. Before we begin, use the following webcomic for a quick sarcastic overview.

Most colleges and universities teach low-level C, Java, Assembly, MATLAB, and C++ as introductory programming languages due to the confusion about whether Computer Science is an extension of Mathematics.

They teach most low-level languages because they are closer to Maths. However, we tend to use high-level languages in the real world. What is the difference between them? Read here.

Learning Programming while picking the wrong language is like using a hammer for a screw. It slows down your progress and demotivates while the programmer doesn’t get jobs even after spending hours trying to learn to program.

Unless you pick PHP as your first language, there’s always something to learn. You will attain valuable skills with any language, but some might not align with your interests and require you to learn something completely different.

So. Which language and tools should you pick?!

Choosing Languages

Don’t go based on the popularity of a language. For the past 11 years, JavaScript has dominated the market as the most-used language for various fields, and that is because every industry uses it. However, what if you want to get into Data Science? There JavaScript isn’t the ideal option.

It is similar to human languages. If I want to go to Germany, I’ll learn their native German language. If I want to visit India, I will learn Hindi. And if I want to go to France, I will learn French respectively. Your choice depends on what you’re trying to make.

For the same reason, I drew multiple roadmaps for you. Most of these fields choose JavaScript as their core language. It is worth prioritizing, but I will go over other technologies to give a broader view other than my personal opinion.

Remember that learning a single language will NOT propel your career. You will require other tools, like Git, Github, AWS, etc. I have considered relevant languages and tools with current or future potential in the Job Market.

Web Development

Most frameworks and libraries in the roadmap are based on JavaScript and can be implemented easily with it. So, it’s crucial to understand the basics of JavaScript. Another essential topic in HTML is DOM. It is one of the requirements to understand React.

Learn those JS technologies after you get a substantial basic knowledge of JS. Even the experienced engineers at Google recommend engineers master the basic knowledge first and practice explaining their thought processes.

Full-stack developers are a combination of front-end and back-end. They handle both sides. Front-end developers create those beautiful interfaces, but the back end makes those elements and components functional.

Astro and Eleventy are efficiently used to make static websites. They are not suitable for website-based applications like Twitter. We would learn React and Next JS based on React for an application like Twitter or Twitch.

SCSS is a pre-processor. It improves the CSS writing process, and TailwindCSS and other libraries with the “UI” suffix are component libraries and frameworks that provide pre-written CSS.

Data Science — AI/ML

There are tons of concepts in Data Science. People prioritize maths, statistics, and linear algebra with probability to understand other data-related concepts. Python appears as the best solution to process data. In reality, it is significantly slow compared to JavaScript. Python has more libraries and additional Data Science and AI/ML features.

Tensorflow is another library used to bring those maths concepts and coding together to create a solution for a problem. NLPs are crucial to understanding even outside Data Science. And Kaggle is like Leetcode with pre-processed data to train your robots.

Data Structures and algorithms will never leave your bedside. You will learn them in Data Science as well. It’s not because they are useful but because they allow you to build a problem-solving curious mindset even though developers treat it like an enemy that only serves its purpose in interviews.

Blockchain Development — Web3, Smart Contracts, etc.

Who would have thought I would speak about blockchain? However, this concept fascinated me during the research phase. I learned everything and the process wherein the back end depends on various blockchains and smart contracts to process user details and information. They are secure.

As the Web3 concept supports the view of anonymity, blockchain allows you to do it.

The front-end or the interface for the user gets built using React and Smart Contracts based on those blockchain systems that handle the back-end with tons of data.

Mobile Development

Since 1993, when IBM was digging around mobile development, there were fewer technologies to rely on. Nowadays, there are many. We divide them into pure Android, hybrid, which can create applications on every platform, including desktop, and IOS, which only has one language with more restrictions than the military strength of Costa Rica.

Frameworks like React Native, Flutter, and Ionic convert the code written using a common language into applications other platforms can adopt. Using the write code for one platform, I can make desktop, web, and mobile applications with them.

They are hybrid and all-in-one solutions. But Java and Kotlin are ONLY for Android development and cannot create a desktop replica with the same code, and the same goes for the Swift language of IOS.

Desktop Development

As stated earlier, frameworks like React Native and Flutter allow you to write code that transpiles to all platforms. Hence, if you’re making a mobile application, you are more likely to develop a desktop version of it, and you can do that with those frameworks without learning anything additional.

However, if you want to make desktop applications exclusively, I have something for you besides Java because most features released by Oracle for Java are useless (Applets were a thing).

A desktop application with HTML CSS JS?! Yes. It becomes easier for you to make desktop applications if you hold fundamental knowledge of all those core web-based technologies. You don’t require quirky Java or .NET pain.

Most platforms, including Notion, convert the web-based application code of their platforms into desktop code using frameworks like Electron. If you try to press a specific shortcut, you will get the Chrome Developer tools on your desktop app even though you are not using a browser, and that’s magic.

Try pressing CTRL + I on the desktop application of Notion, and you will get a tab to view the HTML elements on a darn desktop application.

Game Development

Either C++ or C#. No negotiation. It is because these are the popular languages used in most popular engines. These engines provide drag-and-drop solutions for complex mathematical movements in various games.

C++ and C# are extensions of C, the mother of all languages. However, I wouldn’t recommend learning C first. I don’t want you to give up on programming after three days of getting started. It depends on your learning pace.

These fields are like different trains. You can either pick one and stick to it daily, or first experience a gist of destinations travelled by all the trains and then pick one to travel daily.

Optimize for what fits your personality and goals. I like to try everything first, gain experience, and then pick one.

Exploring Coding

JavaScript or Python are the perfect beginner-level languages because they are used in most fields and are easier to learn. Most companies use frameworks and subsets of JavaScript. You can travel to different places with JavaScript and switch trains whenever you want without buying a new pass.

I’d recommend you pick a language that allows open-source contributions to improve the packages and libraries created using that language and make better projects for other developers. Companies like Oracle often sue various companies for attempting to expand Java beyond its current capabilities.

JavaScript avoids such behaviour, and that’s why so many companies adopted JS & TS together. Java wanted to conquer the entire market. They came up with Applets and other features. None of them lasted, and only JavaScript dominated the space. It has a large and supportive community to help you out.

I recommend starting with Web Development because it is the easiest to learn and gives a sense of fulfilment or progress when you see your code representing your vision on the Internet.

It is also because Web development-related concepts, frameworks, and libraries are present in other fields, like Web3, Desktop Development, Mobile development, and even AI/ML.

You will master the basics of JavaScript and use it in other fields as you expand. Learn one language deeply. I would not recommend joining a boot camp either because they teach multiple languages and tools concurrently with no real purpose.

You end up in a vicious cycle. Instead, pick a specific field and become a master of it.

Any application that can be written in JavaScript, will eventually be written in JavaScript. — Jeff Atwood, the co-founder of StackOverflow.

You should prioritize C over JavaScript because C is a low-level language. It is closer to hardware than other languages if you are intellectually curious and want to learn more about computers.

If you don’t know which one to pick, watch a few YouTube videos of people from those various fields and verify whether it is something you would want to do. If yes, double down. Otherwise, move on to the next one.

But what next? I decided to pick the Web Development route and learned the technologies through practice with trial and error. What can I do next?

How do you use these languages and tools?

Begin by building projects. When you have the fundamentals cleared, you can start using them. I created a 4-step framework for building projects while learning new skills. Hence, I won’t delve deeper into this topic, and you can purchase the 20-page eBook on Gumroad with over 70+ downloads.

Build to solve problems — A 4-step framework guide to build impactful projects, learn skills, and build a portfolio.

Resumes do not matter anymore. Most high-ticket clients look for skills and practical knowledge. The best way to showcase practical knowledge is by building projects. Not only experience, but you get to learn new skills as you progress in making your projects.A degree has only become a piece of paper that signifies you worked hard for four years continuously, and dedicated yourself to merely ONE priority because they want to check whether you would leave their company or stay loyal to them for years.But how do you make impactful projects? Colleges and universities don’t teach the steps to building projects and creating a collection of those projects called a portfolio.Do not worry. I will provide a four-step framework to build great projects repeatedly. These projects will become great by providing value or solving a solution. Experience, projects, and skills matter more than mere knowledge as AI advances to memorising internet data.AI can provide the same knowledge through the internet. There are many resources. However, AI cannot give answers to problems developed by experience. When you build projects, you understand how one module interacts with the other. You face common issues and bugs. Some of these get addressed publicly, while others remain inside the minds of the top 1% of professionals.I’ll help you become a part of the 1% of professionals across various industries. You can apply the framework to any field, especially Computer Science. Everybody suggests we make a portfolio to get clients, but nobody gives the steps or path.I will answer the following questions in this eBook —How can I build great projects that add value to others?How can I acquire skills that will help us build those projects?How to build a portfolio?How can I make a mindset shift of building projects first and learning with experience?Many people waste their time trying to learn skills before creating projects, but it is the opposite, as I uncovered in the eBook.This eBook is for you if —You are someone who wants to achieve financial freedom by creating a service-based business because clients require proof of work.You are an unemployed person looking for new opportunities as projects become the utmost priority of clients and recruiters.You are a beginner, especially in industries like Software Development and want to get a head start before others with elusive work experience.You are a college student who wants to upskill themselves because the curriculum supports rote learners, not problem solvers. You cannot become a problem-solver without making projects.As I uncover the beginning of my Computer Science and hackathon journeys, I will explain how I built projects that mattered and how you can do the same.

afankhan.gumroad.com

Practising is only the first step. If you don’t use those skills and knowledge to build something, you are essentially the human version of ChatGPT who only knows to spit out answers but cannot create anything.

Engineers solve computer science-related problems using coding and leverage Programming to make websites and products to solve real-world problems. They fix those problems by building or doing something.
They use their wisdom and experience.

If you don’t use what you know, you will forget it and further blame yourself for failing to remember it. You will enter an endless loop. Hence, build a project and show it to your friends and family. Web Development is reasonable for showing.

Once you build many projects and have a portfolio, you can apply for jobs or establish a service-based business (freelancing business). You offer your skills to a company through a job or an individual client through freelancing. I chose the latter.

Build something that helps solve a problem in your daily life. Do you require a to-do list with reminders, dates, and other functionalities? Build it.

Is it a PNG to SVG converter? Build it. Without looking at tutorials and solely based on documentation or articles, you build the application and learn the skills required to create these applications while creating them.

Competitive Programming

You might have heard this term. What does it mean? When programmers avoid caring about building projects and want to win competitions and interviews based on mathematical, data structural and complex algorithmic knowledge.

I wouldn’t pick this route because competitive programmers live their lives inside a CLI, the command line interface, and fail to build projects they can deploy and show to the world or their friends and family. They can’t construct something that helps other people.

There are a few times when this type of programming helps, and that is during interviews. After the discussion, people usually don’t come back to these concepts. They enter the real world where companies build things rather than solve complex leetcode problems.

I suggest focusing on the roadmap provided earlier and returning to competitive programming once in a while with your desired language. I’m a JavaScript guy, so I use JavaScript and partially Python or C++ to solve leetcode problems whenever I decide to ruin my life (sarcasm).

Most prefer Java and Python for leetcode problems, interviews, and tough coding questions. However, I don’t remember when I last solved a leetcode problem. Even ChatGPT can do that. I focus on building projects and dislike competitive programming.

It could be because I’m an entrepreneur and freelancer now. However, if you’re optimizing yourself for a job, you will require competitive programming once you get the fundamentals correct with your respective field from the flowchart.

The Dunning-Kruger effect

More often than not, you will experience this effect. You will feel confident when you begin, then realize there are many things to learn. After reaching the lowest point of depression, you will get yourself back together, make a plan, and execute it.

I used to watch at least five videos of JavaScript on Udemy every day without fail. If I had to stay in my college library to complete them, I would till 5:30 PM. And while I did this, I realized that I don’t and can’t know everything. There’s so much to learn in JavaScript. I lost confidence, but I got back up eventually when I realized even seniors make mistakes.

Hence, I started to focus on the crucial fundamental concepts I could learn and were within my reach instead of setting unrealistic expectations of completing JavaScript in 2 months.

I also focused on embarrassing myself to learn more. What would be the best way to embarrass yourself? Hackathons!

Hackathons

Once I had completed that course on JavaScript, I felt significantly confident in building complex applications. Rather than creating a project, I participated in a hackathon with other random strangers. And then I realized — I know nothing.

I came, revised all concepts, built more projects, and participated again with the wisdom and experience gained from those previous hackathons. I embarrassed myself, but I quickly entered a state of enlightenment.

To become a problem solver and great developer, you must know the basics of your field. Look at the flowchart, pick a topic like JS, and begin getting your hands dirty. There’s always a solution for something. You only need to find it.

The computer is never wrong. Stop taunting it for your mistakes. Grasp humility. There’s a lot to learn, and you cannot do everything. If there’s something you don’t know yet, use AI models or Google.

Become a problem-solver.

What are Hydration, CSR, and SSR in React and NextJS?

Afan Khan — Sun, 22 Oct 2023 12:56:36 +0000

Most developers, including myself, were confused about the difference between CSR and SSR. We couldn’t understand Hydration and its basic principles. However, let me fix all that for you. And trust me, it is easy to understand.

But there’s a requirement to learn Hydration. We must first understand client-side rendering (CSR) and server-side rendering (SSR). The concept of Hydration lies within the problems of CSR.

I launched a new free eBook!

https://afankhan.gumroad.com/l/build-to-solve-problems

Client-Side Rendering

CSR is a rendering method that renders the entire application on the client (the user’s browser), including the execution of huge JavaScript files instead of rendering specific pieces of code on the server that do not require user input and others on the client.

When users visit our website, CSR renders an empty HTML document on their browser without any data because that’s how fundamentally React works. If you’ve used React, you would know that every HTML page gets combined into one root file, and that file looks something like this.

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="/static/js/bundle.js"></script>
  </body>
</html>

This empty file gets returned to the client browser when there’s a request. Once the browser locates the bundled JS files in this HTML file, the browser begins executing and parsing that JavaScript code, which contains the HTML DOM elements to fill the empty root div. Till then, the user witnesses a blank page.

The JavaScript code in the <script> tag divides into chunks of code. These chunks slowly execute once the browser locates the JS code. In CSR, these chunks load together, while SSR loads specific static chunks beforehand for faster execution.

The HTML div gets content to display to the user once the browser fetches the JavaScript code from the server to the client device. Within the initial stage and your source code, this root remains empty.

The browser requires the JavaScript files to load the website because the actual data to show the UI interface with its components to the user is present in them. If the JS file is missing, the HTML file will remain empty.

CSR usually takes a few seconds to render the JavaScript code on the client device. Till the rendering completes, users witness an empty white page. Only a few static components are pre-loaded.

When we keep adding additional components, the rendering becomes slower. And on weak networks, it becomes a huge problem. Most people don’t have fast devices with strong ethernet WiFi.

Once the rendering completes, the user can view the entire webpage as a SPA (Single-Page Application). SPA means that all your content is on a single HTML file.

Now, who wants a blank screen? We want to show something to the user till the browser fetches the JavaScript code with the actual data. However, client-side rendering cannot do that.

Server-side Rendering

Instead of rendering the UI interface on the client device, SSR renders a specific chunk of static code on the server beforehand and ships it to the client till the time-consuming dynamic JavaScript code executes.

It doesn’t execute static code on the client device. Instead, it only runs dynamic content on the client device with event listeners and components that require user input.

It creates a basic layout on the server, sends it to the client, and then transfers the JavaScript code with actual data to replace the temporary one. It is like having someone with the same face as a proxy for a few minutes till the original person swaps them.

We will not ship another HTML file to replace the existing one during the second render. JavaScript will provide the new dynamic DOM. React Hydration process will compare the DOM provided by the JS code through the second render with the first render and replace static placeholders with dynamic content.

NextJS supports SSR, and React implements it using React Server Components. NextJS isn’t an innovation. It is a React-based framework that renders the entire application on the server instead of the client.

The initial state of a SPA is static when using SSR with no event listeners or data from DBs, APIs, etc. Everything is static. The dynamic content gets loaded slowly. But hey! At least we don’t see a white or incomplete page.

It makes the process slightly better for small applications and creates significant advantages for massive applications.

But what the heck is Hydration?

Hydration

SSR sends the static skeleton HTML file compiled on the server with temporary data and static information to the client once the client (user) requests to load the website from the server.

After that, the browser fetches those JavaScript files with actual data, DOM components, and custom code to recompose or repaint the application with the desired dynamic requested information.

The virtual DOM created by SSR to serve as a temporary page gets compared with the actual DOM when JS loads. It compares the previous HTML with the new HTML through the difference in DOM trees.

The DOM structure of the temporary page remains the same as generated by the new DOM but with actual data now. We can demonstrate this through the YouTube website.

The image represents the static temporary page. Once the browser gets the JS code, it executes, rebuilds the application, registers event listeners, and restores app states.

The process between the rendering and comparison of the real DOM with the temporary DOM during the first render is the Hydration process.

Once the rebuilding process is completed, the application enters the “Hydrated” state. This state includes comparing and initialising the new DOM nodes with authentic data. Hydration makes the application fully interactive with dynamic information. It happens at build-time.

YouTube is now hydrated. The original DOM tree from the first render doesn’t get changed. Instead, React combines the original one with the new DOM tree generated after understanding the JavaScript code and adopts the existing DOM.

The rendering occurs two times in SSR, while the same doesn’t happen in CSR because the original data reaches the client on the first try and takes ample time to load it till the user clicks off.

Hydration isn’t perfect

Hydration has its cons. The time between the second render and the first makes a significant difference. During this gap, the user cannot interact with dynamic components requiring factual data from the servers. It is called first interaction/interactivity.

React tries to solve this by using Suspense and Streaming with ranking systems based on what the user wants to interact with. This time gap is called the Uncanny Valley. Hydration manages the gap between CSR and SSR, and this assumed valley.

Even with SSR, the user must wait for the JS to re-load the temporary HTML and bring authentic data while they sit and stare at a default landing page with suspense-based cards. It depends on which route you would like to pick.

Most chunks of websites and applications are static. Hence, these static components get rendered with temporary data on the server way ahead of time. They get built at compile-time by generating the initial HTML file.

During Hydration, React or Next assumes that the DOM structure will match between both renders. During the first render, React builds a mental model of the future DOM and then constructs the future DOM using the JavaScript code in the second render.

The Cereal Example

Most cereal packets and boxes don’t have their expiry date printed during the box manufacturing. Heck, the cereal doesn’t even exist when the box gets manufactured.

Hence, companies only print the standard design on the boxes, including the logo, an illustration, pictures, ingredient information, and a small space for the expiry date.

A machine prints the expiry date on the boxes once the cereal production is completed, and the boxes get filled with them. Those boxes have many empty spaces because they do not have the actual content till production.

In the same way, SSR (or two-pass rendering-based) applications are empty at the beginning. They only have the essential information shown to the user. In our case, this gets displayed through the temporary page with loading cards, buttons, etc.

Once the data and content get fetched from JavaScript, the application starts to get filled with actual information. Then, users can interact with the dynamic content. The empty box gets filled with cereals. Our virtual DOM adapts the data from the real DOM through JavaScript.

Summary

In a nutshell, SSR is the process of rendering a dummy loading page of an application on the server and shipping it to the user before loading the huge JavaScript files containing dynamic data that stop the execution of other files.

Once this sample page gets loaded, the server sends the remaining JavaScript files that consume ample time to execute and allows the browser to begin parsing them while the user witnesses a static page.

Based on the data and code from those JavaScript files, the browser re-renders the entire application with the actual data.

Applications created using React and Next JS are SPA-based. It means that these applications combine into one HTML file. And this root HTML file gets displayed to the user.

The other pages, including the main page, are handled using routes, but the root file holds the content for everything as it is the file that gets hydrated.

Hydration is the process of re-rendering the dummy page with actual data. The root file is only sent once and modified later in the second render.

We hydrate those pages. React has a component called Suspense. This component allows websites to provide a temporary page with the sample UI interface till the browser loads the actual JavaScript.

It allows selective components to get hydrated earlier while de-ranking others. If the user clicks on a specific component, that component gets the priority.

I'd love to get your feedback through the comments section.

Event Propagation & Delegation: Bubbling and Capturing in JavaScript DOM

Afan Khan — Sat, 14 Oct 2023 09:15:34 +0000

JavaScript DOM events have specific phases, from clicking an element on a website to the JavaScript responding with a surprise. Most developers don't know how the browser handles events in its engine with the DOM tree.

If taken advantage of, they can reduce multiple LoC and efforts of the developer alongside the client-side browser. Only a few people are aware of these techniques. You can be one of them.

I launched a new free eBook!

Click here to get your copy

Capturing & Target Phase

We will use the following HTML code during this article.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event Propogation and Delegation</title>

    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="main">
      <p class="main-p">Click here 1</p>
      <p class="main-p">Click here 2</p>
      <p class="main-p">Click here 3</p>
    </section>

    <script src="script.js"></script>
  </body>
</html>

What do you expect the DOM to do when you click on one of those <p> elements? It creates a click event! However, the click event does not occur directly on the target element or the <p> tag. The actual event gets generated at the root of the HTML document. The Document object represents the root.

This is the Capturing Phase. The click event object travels from the root of the DOM tree to the target element. It touches each parent element in the DOM tree before reaching its target during leisure travel because it gets generated at the root. The target phase begins when the event object arrives at the target element.

During the target phase, the event handler executes the callback function on the target element after the object reaches the target element.

These event handlers or listeners wait for specific events to occur on particular elements of the HTML DOM tree, and they react once that happens with a callback function alongside the default event object.

Bubbling Phase

In the bubbling phase, the event object returns to the document root after the execution of the callback function. The event comes from the root and returns to the root.

Most developers leverage this bubbling phase to attach event listeners to parent elements instead of multiple child elements.

The events bubble up from the target to the document root element. The event passes through each parent element, not through any sibling elements, during its reincarnation to the root.

Cool, but how the heck is this beneficial?

It becomes beneficial because the Bubbling and Capturing phases allow events to pass through their parent elements. If we attach event listeners to parent elements instead of the target elements (child elements), we can perform the same operation with fewer LoC. These events precisely propagate from one end to another.

Before reading this article, you used a forEach loop to iterate through each element of a specific class and attached event listeners to all of them, as shown in the following example.

const pTag = document.querySelectorAll(".main-p");

pTag.forEach((element) => {
  element.addEventListener("click", () => {
    element.classList.toggle("p-color-change");
  });
});

But this is not viable. The loop takes ample time, and adding event listeners to all elements is inefficient. Therefore, we directly attach it to the parent element. In our case, the parent element is the <section> tag.

const section = document.querySelector(".main");

section.addEventListener("click", (e) => {
  const target = e.target;

  if (target.classList.contains("main-p")) {
    target.classList.toggle("p-color-change");
  }
});

As stated earlier, each event creates an object with many intricate details. Even the click event generates a click object that you can use by passing it as the first argument to the callback function of the event listener.

The target property within the event object returns the HTML element that experienced the event. I am storing that HTML element in a variable for later use. After that, I verify whether the target element is my

tag with a specific class. If yes, it will change the colour. Otherwise, it will ignore it.

The if-statements are required because we attached the event listener to the parent element. There may be other elements in that parent element. I want the colour to change for any element except the

tag. Hence, I require the if-statement.

We achieved the same outcome with more efficiency. If you noticed, we use the Event object as a parameter to the callback function in the addEventListener() method. This object contains the properties of a specific event and travels to the target element.

Otherwise, you would attach an event listener to each parent element for the same callback function. You can directly connect the event listener to the parent element. The event object travels from the bottom to the top and vice versa as if the event had occurred on those elements instead of the target element.

We can take leverage of this behaviour. Events can only be handled in the target and bubbling phases by default. But we can also set up a different approach to operate event listeners in the capturing phase with an extra parameter in the addEventListener() method. However, we avoid doing that and prefer the Bubbling technique, as shown in the code snippet above.

By the way, some events can't have Capturing and Bubbling phases. They directly opt for the target phase. However, most of the events must use the Capturing and Bubbling technique. If you notice that an event acts suspiciously to this approach, it could be because it is not supported yet.

Summary

This was the process of Event Delegation because we were delegating the responsibility of the event listeners from the child elements to the parent elements with the concepts of Event Propagation.

You can also perform Event Propagation without delegation, but I only do that to explain alternative solutions to students. We can add a third boolean parameter to addEventListener() if we want them to invoke the callback functions during the capturing phase instead of the bubbling phase. By default, it is set to false as developers prefer using Bubbling.

Bubbling and Capturing are here because of historical reasons when different browsers implemented identical, but not the same, versions of JavaScript. It was before ECMA Specifications.

To summarize, the Event Propagation process has three different phases — Capturing, Bubbling, and Target. Each of these phases appears at the different DOM event reaction stages. They allow us to effectively apply event listeners to multiple elements concurrently without the requirement of loops and 100s of listeners.