Forem: Suryaraj Bhaduri

Polyfills in JavaScript 🔧⚙

Suryaraj Bhaduri — Fri, 14 Jan 2022 18:05:19 +0000

Who doesn't want their web apps to perform flawlessly across all web browsers i.e be cross-browser compatible! But with more and more new features coming to JavaScript, many old browsers now do not have support for all of them.❗💀

Polyfills is the solution to the problem.🌈✨

Prerequisites

Basic JavaScript (if, else, for-loops, etc.)
this keyword
Prototype (can read from this link)
Higher order functions e.x map(), filter(), reduce()
Will to learn 🚀

What is a Polyfill?

Polyfill is a piece of code that is used to bring support for newer features in older browsers that currently do not have native support for these features.
For example, suppose JavaScript releases a new function, say x as a part of their language iteration. Now some older browsers might not have support for this function. But we developers would want our apps to be cross-browser compatible. Polyfills help us in making this possible with custom code.👨‍💻

Note📝- To code the polyfill for any feature, one must first be aware of the internal workings and specifications of the same.⚙

Polyfill Demo 🚀

Enough talk, we need some code now.🤓👨‍💻

For the sake of this blog we would be coding polyfills of three higher-order functions which were added to JavaScript as a part of ES5, namely map(), filter() and reduce().

❌ Disclaimer - By no means should this be considered a guide to using the aforementioned higher-order functions.

That being said, take a look at the following image for a refresher of these functions if you're feeling a bit rusty.

Polyfill for Map

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array - MDN Web Docs

Let's look at the following code. The code here is for -

computing squares of numbers of a given array
alternate casing of characters of a string (if the index is even , the character should be in uppercase else lowercase, e.x. polyfill => PoLyFiLl)

Now, the fun part🌈!!
Let's code the basic polyfill i.e our custom implementation for the map function.

Take a look at the following code.

👉Steps to code the polyfill for map -

Have a clear understanding of how map() works
Create a function, which here we have named customMap and attach it to Array.prototype
Pass a function as an argument that would be run over every element (this resembles the callback in map)
Create a new array that is initially empty
Loop over every element of the array using this and push every new element to the new array
Finally return the output array
Voila!! 🎉🎉 You're ready with your first polyfill!!

Let's put our customMap to the test.🚀🚀

Our polyfill passed the test i.e it yields the same results as the original map function.✅✅

Next, let's move to the filter function.

Polyfill for Filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function. - MDN Web Docs

Let's look at the following code. The code here is for -

filtering out all odd numbers from a given array of numbers

Now, time to code the basic polyfill for the filter function.🌈

Look at the following code for better understanding.

👉Steps to code our filter polyfill -

Have a clear understanding of filter() and how it works
Create a function, which here we have named customFilter and attach it to Array.prototype
Pass a function as an argument that would be run for each element
Create a new empty array to store the filtered items
Loop over the array items using this and push only those items to the new array which satisfy the test
Finally return the output array containing filtered items
Superb!!🎉🎉 You have coded your filter polyfill!

Similar to the above, let's put our customFilter to the test.😅

Our polyfill for filter yields the same result as using the inbuilt filter function!!✅✅

We've almost reached the end of the blog.🏁 Next, we would quickly cover the reduce function.

Polyfill for Reduce

The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value. - MDN Web Docs

Let's look at the code below. The code here -

computes the sum of all elements of an array

Let's try and write the basic polyfill for reduce function.

✔Recommended - First try on your own and then proceed to the code below.

Let's try testing whether our polyfill code works or not!

Awesome!! 🎉🎉 This also yields the same result as before.

If you made it this far, pat your back. You're awesome!🌈🚀

Bonus🦄 - History of Polyfill

The name Polyfill comes from the name of a product used to cover cracks and holes on a wall, called Polyfilla. The term was coined by Remy Sharp while writing his book "Introducing HTML5" back in 2009.

📕Can read more about this - here

Conclusion

Congratulations!! 🎉🎉 You made it till the end. If you're still here chances are you probably liked the blog.

I am still learning Polyfills. Hope this blog gave you a decent introduction to what they are.

Do let me know how you liked the blog and where I need to improve. Would be eagerly waiting for feedback!🙂

Transpilers vs Compilers⚙

Suryaraj Bhaduri — Wed, 12 Jan 2022 04:50:31 +0000

When it comes to transpilers vs compilers, there is a world of difference between the two. As a software engineer, it is almost absolutely essential to have a firm idea about what transpilers and compilers are and this blog would help achieve the same.👨‍💻✨

Prerequisites

Will to learn 🚀

First, let's define a few terms before getting to know about transpilers and compilers.

Abstraction

The term Abstraction will come up often in this blog, so let's define it before moving forward.

Abstraction - It refers to presenting the user with only the necessary details instead of all the implementational details.

Example📝 - We all have used a remote to operate our television sets 📺. Do we know or ever intend to know how the remote works internally while changing channels? 🙄
No right! This is an example of abstraction in real life. The remote provides us its interface beyond which we don't really need to know anything for successful operation.

Machine Code

What is machine code? 🤖

In computer programming, machine code is any low-level programming language, consisting of machine language instructions, which are used to control a computer's central processing unit (CPU) - Wikipedia

Programming languages of the likes of Java, Python, JavaScript are considered high-level programming languages as they provide a great level of abstraction to the developer. They allow the developer to worry less about intricate details and focus entirely on software development.🌈

On the other hand, machine code has very little abstraction and is not built to be best suited for development purposes.💀

Take a look at the following image for better understanding.

Next, let's move to the main part of the blog.

What is a compiler?

A compiler is a utility program that takes in our source code and generates executable machine code 🤖.

There are different types of compilers -

Just in Time Compiler (JIT)
Incremental Compiler
Load and Go Compiler

and many more.

Take a look at the following image to get a better understanding of how a compiler works at a higher level.

What is a Transpiler?

On one hand, where a compiler takes source code and converts it into a lower-level language in comparison to the source code, a transpiler takes our code and translates it into something similar while keeping the abstraction level the same as before.

Example📝 - For any TypeScript code to run, it has to be first converted to JavaScript and it is done via transpiling the TypeScript source code.

Also, Babel is another transpiler used to transpile ES6+ JavaScript to more compatible forms suitable for older browsers.

The following image shows ES6 JavaScript code being transpiled to ES5 code.

Transpiling Demo 🚀

Here, we would see how a TypeScript code is transpiled to JavaScript code.

TypeScript Code

To transpile the TypeScript code we use tsc file_name.ts in the terminal. This creates a JavaScript file containing the transpiled code with the name file_name.js in the same directory.

Transpiled JavaScript Code 🌈

Conclusion

Congratulations!! 🎉🎉 You made it till the end. If you're still here chances are you probably liked the blog.🚀
Here, we merely scratched the surface of transpilers and compilers.

Do let me know how you liked the blog and where I need to improve. Would be eagerly waiting for feedback!

Implement dark mode in React 🌞🌕

Suryaraj Bhaduri — Sat, 18 Sep 2021 17:59:04 +0000

Who doesn't want a dark theme on their website! Not only does it help us focus better, but also keeps our eyes safer 🤓.

The blog might add value if you belong to either of these situations -

Maybe you have been in a place wherein you want to implement a dark theme for your website but are struggling around the same 😵.
You are starting out with React, so this might just be another fun exercise for you to try 🎉.

Prerequisites

Basic knowledge of React and terminologies (state, props, etc.)
Basic knowledge of CSS
Will to learn 🚀

Spin up a new React Project ✨

You could use your local development environment or maybe use a sandbox.

Note📝 - If using local setup prefer cleaning up the factory code before moving further.

Also, I will be using class based components for this one - not using React Hooks.

Create a simple page

In our App(), just return a div for the time being. (Can use a button as well)

Add state to our app

We cannot do much with a dumb component when it comes to embedding logic inside of it. So we need to add state to the React component.

Add a state called isDarkThemeEnabled to the App component and set it to false.

Creating the theme switcher logic 💡

This is the crux of the entire problem.

How to build the theme switcher / toggler ?

This might become simple, if you try to draw an analogy to a light bulb. A light bulb has two states on and off.
At any given point of time it is in one of the either states.

Now, imagine the theme switcher to be a bulb and try to map the idea.

You got it! 🎉 If the theme switcher is imagined to be a light bulb, light mode becomes on and dark mode becomes off or vice-versa.

Now, how to toggle the state ? Pretty simple, just flip the current state whenever a certain event fires.
In simpler terms - on clicking a button change the state value from true to false or vice versa.

Implementing the theme switcher logic

Now, as we have designed the approach it's good time to start coding up the idea.
FYI for changing state in React we use the setState function. You can read about the setState API from here.

Let's create a clickHandler and embed the state-toggler logic inside of it.

Pass this clickHandler to the onClick prop of the div, to trigger the function whenever user clicks on the div.

Adding SVG to our app

I want to let the user know which mode he can currently switch to. Can be accomplished with text, but what better than using SVG icons to enhance the UI !🎉

I will be using heroicons for high quality SVG icons.

Create two files in your /src directory, for two SVG icons for the two states. I will be using a Moon and a Sun SVG in this case.

To use any SVG in our React app, we can directly use them in our code or import the SVG as a React Component. I prefer the latter as it helps to keep the code cleaner.

This is how we import an SVG icon as a React component -

import {ReactComponent as Moon} from './moon.svg';

We need to toggle the SVG icons as well to suit our purpose. For this we will use conditional rendering.
This is a gem 💎. You can read about this here.

The idea is, whenever isDarkThemeEnabled is true we need the sun SVG to show up else the moon SVG should show up.

This is how the app looks right now. You're almost there.🏁

Let's style up our app

When dark mode is enabled we would want to paint our app background dark. So, for this we would prefer applying classNames conditionally.
You can read on this from here.

We would be using JSX expression and Template Literals for this. When isDarkThemeEnabled is set to true, which means dark mode is enabled, we would append a className to the App className.

className={`App ${isDarkThemeEnabled && "dark-mode"}`}

Now lets add some style for the .App.dark-mode class.

Let's also style up the SVG icons 💅. Add a className of moon and sun to <Moon /> and <Sun /> components respectively.

This is how the App code looks right now.

import "./styles.css";
import React from "react";
import { ReactComponent as Moon } from "./moon.svg";
import { ReactComponent as Sun } from "./sun.svg";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDarkThemeEnabled: false,
    };
  }

  handleClick = () => {
    const { isDarkThemeEnabled } = this.state;
    this.setState({
      isDarkThemeEnabled: !isDarkThemeEnabled,
    });
  };

  render() {
    const { isDarkThemeEnabled } = this.state;
    return (
      <div className={`App ${isDarkThemeEnabled && "dark-mode"}`}>
        <div className="toggler-btn" onClick={this.handleClick}>
          {isDarkThemeEnabled ? (
            <Sun className="sun" />
          ) : (
            <Moon className="moon" />
          )}
        </div>
      </div>
    );
  }
}

export default App;

Add desired styles in the styles.css.

✨ Add a transition time to the wrapper class to make the color switch smoother. I added transition: 0.3s ease to .App.

This is how the App looks finally!
Note - I have added some additional styles and animations.

For a larger websites use css variables to make painting UI components on theme toggle easier.

Feel free to play around with the sandbox.

Conclusion

Congratulations!! 🎉🎉 You made it till the end. If you're still here chances are you probably liked the blog.

You can also make improvisations to this simple project and share them. This would help in getting the fundamentals stronger 🏋 🚀.

Do let me know how you liked the blog and where I need to improve. Would be eagerly waiting for feedback!

Health for Software Engineers🤾

Suryaraj Bhaduri — Thu, 09 Sep 2021 19:01:12 +0000

There's this common saying - "health is wealth", a proverb often forgotten in modern world. As the world is picking pace and moving faster than ever before, our health is what turns out to be most neglected 😞.

Now coming to us developers, most us might not prefer to speak on boring topics like health, and quite similarly the software world is very famous for its sedentary lifestyle.

Many software engineers have complained of severe back pain and other issues till they realised that health is something which is important as well.

Tips for better health ✅

If you are a software engineer, these following suggestions might gift you a better health and a better life. 🎉

Get Moving🚶‍♂️
This is probably the most simple yet the most effective decision you as a developer could take for your health.

After sitting on your chair for hours you might feel a strange dip in your focus and energy levels. A simple walk for 30 mins outside will bring back the focus and refresh your energy levels🔋.

Who knows you might even get an idea for the bug long left unsolved 🤯!

Human body was not meant to sit for hours in front of a computer. So try getting up and moving around every now and then and I cannot stress this enough.

Drink Water 🚰
This is one of the most underrated options. You need to keep yourself hydrated, so consider sipping on a glass of water every now and then.

Up to 60% of the human adult body is water

So, do make sure to keep yourself hydrated 🥤.

Workout🏃‍♂️

I agree its hard to find time to workout on a regular basis. But lack of physical activity is a silent killer🔪.

Make a determination to workout 3-4 times a week as this will only help you stay healthy in the long run. And better health correlates to better focus 🧠 which equals better software development (if you're a developer).

If its hard for you to find time to hit the gym, no worries, I am attaching some links to workout sessions which I personally find very helpful.

Even 20 mins of home workout, 3 / 4 times a week is way better than weeks of no activity.

Nutrition 🥦

Proper nutrition plays a vital role in your health. Instead of eating out prefer food made at home, and prefer fruits and vegetables🍎 over junks 🍔.

Sleep 😴

Probably the most important of all. A good night's sleep can give you a full day's energy and to take on the nasty bug that has been giving you sleepless nights for weeks.

Sleep is so underrated ✅.

These were some of the changes you as a developer can make in your lifestyle that may not show immediate results but more often than not will help you in the long run.🎉

P.S - Would be great if you let me know in comments where I went wrong or have missed something 😀.

Tutorial Hell 101✅✅

Suryaraj Bhaduri — Tue, 07 Sep 2021 18:32:41 +0000

What is Tutorial Hell🔥?
Well this is a situation in which the learner always feels incompetent or scared to implement things out on their own and relies heavily on tutorials.

How does one land up in Tutorial Hell?🤔
There's no one answer to this, but usually this situation is common in beginners or people trying to master a new skill. At that point they need quick explanation and depend on video tutorials which is a good idea.But over consumption of tutorials leads to a form of dependency which becomes hard to overcome in future.

How do I know if I am in Tutorial Hell or not?😨
These are some of the situations that might be an indicator of the same -

You find yourself busy watching video tutorials most of the time
You think you will not be able to code without an instructor's guidance
You keep course shopping or spend time on course websites thinking of getting that one course that might teach you the topic the best way possible

Looks like I am in hell, any idea how to move out of it?🏃
No issues. Firstly don't panic and get yourself a glass of water. Now showing you the way out of this place. Well there's only one way I know of which is - "start doing things on your own".You will make mistakes, and this might seem very hard at the beginning and even at later stages, but the key 🔑 is to never,ever give up.Am I saying you should never watch tutorials? Absolutely not! You should always go for tutorials whenever you feel like, but its just that the frequency should be lesser than what it was previously.

How I got myself out of the hell?
Like many of you budding developers out there, I was in the same place. Was finding it very hard to get out of the same. I was trying to learn front-end web development. Although I had previous knowledge of computer programming, still I faced lot of issues and fear in initial days. Gradually I made up my mind to take on projects on my own and started with the simplest of projects. This helped🎉.

Important Note👈
If you are in the process of moving out of tutorial hell, you are basically trying to move out of your comfort zone which can be extremely hard. Make sure to not over stress yourself ,take ample rest, drink water, workout and rejuvenate yourself from time to time. This might help make the process a little easier.

P.S - This is my first ever blog.There are surely tons of things I missed and many places I went wrong. Do let me know in the comments.😄