Forem: Sobhan Dash

What the heck is JSON.parse() and JSON.stringify()?

Sobhan Dash — Sun, 05 Jun 2022 10:06:32 +0000

What is the JSON.parse method?

As simple as it is, the method parses a JSON string, constructing a Javascript value or object described by the string.
An optional function called reviver performs a transformation on the resulting object before being returned.

Syntax:

JSON.parse(text)
JSON.parse(text, reviver)

What do the parameters mean?

:- text = >
It's the string to parse as JSON.

:- reviver (Optional) = >
The reviver function prescribes how the value produced originally by parsing gets transformed before being returned.

What do we get as return value?

We get a JavaScript object representing the given JSON value

Example

//1-
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]

//2- With reviver function
JSON.parse('{"p": 5}', (key, value) =>
  typeof value === 'number'
    ? value * 2 // return value * 2 for numbers
    : value     // return everything else unchanged
);

// { p: 10 }

What is the JSON.stringify method?

The method converts a JavaScript object or value to a JSON string.
If I provide a replacer function in the optional parameters, then it will replace the specified options or include the properties.

Syntax:

JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

What do the parameters mean?

:- value = >
It's the value to convert to a JSON string.

:- replacer (Optional) = >
The replacer parameter can be either a function or an array.

As a function, it takes two parameters: the "key" and the "value" to be stringified. The object in which the key was found is provided as the replacer's "this" parameter.

If replacer is an array, the array's values indicate the names of the properties in the object that should be included in the resulting JSON string.

:-space (Optional) = >
The space argument may be used to control spacing in the final string.
Its mostly used for readability purposes.

What do we get as return value?

We get a JSON string representing the given value or undefined.

Example

//1- 
JSON.stringify([1, 'false', false]);   // '[1,"false",false]'

//2- With replacer function
JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}', only keep "week" and "month" properties

That's it! Now you know how to use both function.
If it was worth reading do drop a follow on my Twitter handle!

Javascript Array Methods

Sobhan Dash — Sun, 29 May 2022 16:48:26 +0000

There are several array methods in JavaScript. Some of them are used more frequently than others, such as map, join, filter, reduce, forEach, etc.

Let's learn a few more methods that are certainly powerful and will be useful in your next application.

1- every()
The method returns true if the condition inside a callback returns true for each element in the array.
If any one element does not satisfy the condition, it returns false.
It does not change the original array and doesn't work on empty arrays.

2- some()
The method returns true and stops if the callback returns true for one of the array elements.
We get false if the callback function returns false for all the array elements.
It does not change the original array and doesn't work on empty arrays.

3- shift()
The method removes the first item of an array.
We get an element that was shifted as the return value.
We change the original array while calling it.

4- unshift()
The method adds new elements to the beginning of an array.
We overwrite the original array while calling it.
We get the new array as the return value.

5- from()
This is a static property of the JavaScript Array object, which means we can only use it like Array.from().
If we use it lie arr.from(), it'll return undefined.
What it does, is create an array from an iterable object.

6- splice()
We can either add or remove elements from an array using this method.
We overwrite the original array when we call it.

That's it for this version of the article. If you want more then let me know👇🏻

Also follow my Twitter

How to simply use Font Awesome 6 in React

Sobhan Dash — Mon, 23 May 2022 05:10:21 +0000

If you have heard about Font Awesome, you know how helpful it is for web developers. In case you have not, Font Awesome is a place where you can find great icons for your projects.
With the new version 6 released, we have access to many more icons than in previous versions.

Font Awesome has five types of icons available.
fas for Font Awesome solid, fal for Font Awesome Light, and others for Thin, Regular, and Duotone. These add a great deal of flexibility to UI/UX design.
However, the Light, Thin, and Duotone are available for pro members only.

It is available for multiple frameworks like HTML, React, Angular, and Vue 💪🏻.

Installation

Let us get started with installing the libraries required for react-fontawesome to work.



// If you are using npm:
$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

// or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

The packages here are for the free version. If you’re looking to utilize new pro icons and styles, look at their site for additional installation and setup directions.

Implementation

With that done, we can start implementing these icons throughout our app.
There are different ways you can use the icons. Here, we will see the way that is usually used and is effortless to the greatest extent.
We import the fontawesome-svg-core module into our root level of the application, i.e., App.js, and use the library.add method to add them to the app.



//App.js
import { library } from "@fortawesome/fontawesome-svg-core";
import { faMoon, faRocket } from "@fortawesome/free-solid-svg-icons";

library.add(faMoon, faRocket);
…

All icons can be found in Font Awesome’s icon library.

That completes the implementation of the icons in the application.
Let us create a component called Component.js. Since the icons are already added to our library in App.js, we just need to import this:



// Component.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Component = () => {
  return (
    <div className="App">
      To the Moon:
      <FontAwesomeIcon icon="moon" />
      <FontAwesomeIcon icon="rocket" />
    </div>
  );
};

By adding faMoon and faRocket to the library, we can refer to them throughout the app using their icon string names moon and rocket (in lowercase letters). If there are two parts like faTruckMonster then it would be truck-monster. Just pay attention to the names displayed on the icon cards on the website.

So initially, the icons will be in their default form, squished and small.



<FontAwesomeIcon icon="moon" color="silver" size="3x" />
<FontAwesomeIcon icon="rocket" color="rebeccapurple" size="2x" />

FontAwesomeIcon component can take a few different props to change the icon style. Here we used the color and size props. The size prop expects a string value like xs, lg, 2x, 3x, etc.

There are quite a few more props that can also be passed. Notably, the rotation and pulse boolean props will have the icon rotate on itself.

We can add custom CSS to them in the .css file. Since the icons are SVG we can change the font size and color properties to something to our liking.

Note: Don't use the CDN link of FontAwesome in your index.html file. It will decrease the performance of your site.

You are now able to use icons in any app that you want. So, build projects and have fun with them.

Thanks for Reading!

What is Map object and its applications

Sobhan Dash — Sat, 14 May 2022 11:03:06 +0000

Let's learn about JavaScript Maps.

Maps are similar to objects.
They store the elements in a key/value pair.

However, a map can contain objects, functions, and other data types as a key, unlike objects.
We can create a Map using the new Map() constructor.

To insert it into the map, we use the set() method. We can use objects and functions as keys as well.

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
console.log(map1)
//expected output: Map {"a": 1, "b": 2}

To access the elements, we use the get() method. We call the get method on the key and get the corresponding values.

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
console.log(map1.get('a'));
// expected output: 1

To check if an element is present in the map, we get a function called has()

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
console.log(map1.has('c'))
//expected output: false

Then we have clear() and delete() methods which can enable us to remove data from the map

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.delete('b');
console.log(map1)
//expected output: Map {"a" : 1}

To get the length of the Map we have the property of size which will give us the number of elements present on the map.

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);
console.log(map1.size); 
// expected output: 3

To iterate over the map, we can use for loops or for-each loop. The elements are accessed in the order they have been inserted.

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);

for (let [key, value] of map1){
    console.log(key, "-", value)
}
// a - 1
// b - 2
// c - 3

map1.forEach(function(value, key){
    console.log(key + "-" + value)
})
// a-1
// b-2
// c-3

We can iterate over the keys and values individually as well.

for(let values of map1.values()){
    console.log(values)
}
//1 2 3 

for(let values of map1.keys()){
    console.log(values)
}
//a b c

That was a quick overview of the Map object.
Let me know if you have used it in practical application and how did it perform!

Become the warrior of the night(Shhh! It's dark mode)

Sobhan Dash — Thu, 05 May 2022 08:49:33 +0000

These days everyone needs a dark mode feature in their app. Why? Well, people love using stuff that doesn't hurt their eyes and can be used discreetly (Yeah, I'm looking at you night owls)

Now a question would be, why not make it dark from the very start?
So the answer would be that there are people who feel it inconvenient to use dark mode, so an accessibility issue arises.

So I was working on building three different apps and decided that I should keep the dark mode toggle too.

Header

Usually, the toggle is placed in the header. Thus, we will create a React component that will hold the button for switching the themes.

Using the React hooks, useState, and useEffect, we make the state and the side effect that will add/remove the class for the dark mode.

function Header() {
  const [ darkMode, setDarkMode ] = React.useState(false)

  React.useEffect(() => {
    const body = document.body
    const toggle = document.querySelector('.toggle-inner')

    // If dark mode is enabled - adds classes to update dark-mode styling.
    // Else, removes and styling is as normal.
    if( darkMode === true ) {
      body.classList.add('dark-mode')
      toggle.classList.add('toggle-active')
    } else {
      body.classList.remove('dark-mode')
      toggle.classList.remove('toggle-active')
    }
  }, [darkMode])

  return (
    <header>
      <div
        id="toggle"
        onClick={() => darkMode === false ? setDarkMode(true) : setDarkMode(false)}
      >
        <div className="toggle-inner"/>
      </div>
    </header>
  )
}

App

Just to create a little content for the page, I have added some text.
We are importing the Header component.

function App() {
  return (
    <main>
      <Header />
      <div id="container">
        <h1>React Dark Mode</h1>
        <p>Uses state to set a class on the body if dark mode is enabled.</p>
        <p>Implementation is done due to a side effect</p>
      </div>
    </main>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

CSS

After we are done with the components, we need to style it a bit.
The basic setup is something just removing the margin and padding and the total width and height of an element as box-sizing.

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Then we go on and give a basic background, height, and width to our page.

body {
  color: #1a202c;
  transition: color 0.2s ease-in;
}

#app {
  height: 100vh;
  width: 100%;
}

After that, we need to style the main section and the header.
An interesting addition is the transition property. This provides a smooth change to the background color. And we add position: absolute; in the header so that we can overlap over other elements.

main {
  background-color: #f7fafc;
  height: 100%;
  width: 100%;
  padding: 20px;
  transition: background-color 0.2s ease-in;
}

header {
  position: absolute;
  right: 2rem;
}

Then the container containing the little text that we have written is styled. Nothing too fancy, we just center it to the window and apply a few color variations to the headings and paragraphs

#container {
     display: flex;
     height: 100%;
     width: 100%;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

#container h1 {
     padding: 0;
     margin: 0 0 10px 0;
}

#container p {
     opacity: 0.8;
}

After we are done with this, 60% is done. All we need to do is implement the styles for the toggle and dark mode variations.

Let's jump into the toggle then:

#toggle {
     width: 50px;
     display: flex;
     padding: 5px;
     background-color: #1a202c;
     border-radius: 1000px;
     cursor: pointer;
     box-shadow: 0px 5px 20px -10px #000;
     transition: background-color 0.2s ease-in;
}

#toggle .toggle-inner {
     width: 20px;
     height: 15px;
     background-color: white;
     border-radius: 1000px;
     transition: margin-left 0.2s ease-in, background-color 0.2s ease-in;
}

#toggle .toggle-active {
     margin-left: 20px;
}

Finally, the dark mode styling is done something like below. We just change the background colors and the text color. That's all

.dark-mode {
     color: white;
}

.dark-mode main {
     background-color: #1a202c;
}

.dark-mode #toggle {
     background-color: white;
}

.dark-mode #toggle .toggle-inner {
     background-color: #1a202c;
}

So that's it. It'll be a big help for your next project, the same as it was for me. I don't have to keep checking different pens for the same thing now xD.

Customize it and have fun!

Debounce your way through tough resource-intensive tasks in JS

Sobhan Dash — Thu, 28 Apr 2022 11:34:33 +0000

Most of us have worked with resource-intensive tasks or server calls in JavaScript, and we also have encountered situations where we need to regulate the number of times a function is invoked.

Debounce helps us to do the exact thing. We can use the debounce() function to wait a certain time before running again.

A lengthy way of doing the same is using the setTimeout/clearTimeout functions in the order:

Cancel the previously running timer.
Start a new timer.
Run the delayed code on timeout.

For example, let's create a autocomplete search bar.

const search = document.createElement('input');
const suggestions = document.createElement('div');

// Declare timer
let searchTimer;
search.addEventListener('input', () => {

  // Clear timer
  clearTimeout(searchTimer);

  // Start a new timer
  searchTimer = setTimeout(() => {

    // Run slower code
    fetch(`/api/search?query="${encodeURIComponent(search.value.trim())}"`)
      .then((response) => response.json())
      .then((body) => {
        suggestions.textContent = body.join(', ');
      });

  }, 300);

});

search.type = 'search';
search.placeholder = 'Please enter your query...';
document.body.appendChild(search);
document.body.appendChild(suggestions);

Another example of debouncing can be found in this interactive pen Debounce Visualizer

Now a question arises,

Why do we need Debounce?

As I said, there are several input signals in JavaScript frontend apps. These are usually in the form of events from various user inputs such as the user mouse movements, keyboard inputs, or resizing the browser window.

So like the above example where we need to talk to the server for fetching the appropriate data, constantly changing input will trigger the time-consuming functions more often than the browser can manage. Debouncing will reduce the number of calls made to the server.

Another reason to debounce is that the updates of the user interface might become too frequent. You might have experienced flickering in your UI. This can occur when an area is dependent on the user input, and the value changes frequently. It can be seen while a user is typing or when the validation error tooltips update on each user input. They give a "flickering" impression.

How long should the debounce timeout be?

It could be anything you want, but a standard time has been set under some rules.
For fluid updates and a smooth user experience, a delay of 30 milliseconds is a sweet spot.
If you have played any game, you know that 30fps is fairly smooth too, and would give us 33.33 milliseconds per frame. (1000 / 30 = 33.33)

Delaying no more than 30 milliseconds is usually barely noticeable but still greatly debounces things like window resize or scroll events. These debounce delays can therefore be added fairly freely to your code without having too much negative impact on your application.

Similarly, for keyboard input and window resize, a delay of 300 milliseconds is a good number. Since it is a longer duration than the previous one, the delay will be visible. The users can experience the lag in UI. However, this is perfect for use cases like searching. If the duration is decreased the user will trigger searches too frequently.

Note: The total time to present the suggestions in the above example will be total time = debounce delay + server latency + server database lookup.

Adding the debounce function can worsen the user experience. So try to be mindful of where it is absolutely required. The 300 milliseconds debounce delays can also be used for resizing the window. While resizing, we trigger many events and often trigger reflow operations because of layout changes.

The delay thus prevents the app from locking up while the window is being resized. However, we should always try to fix using CSS rather than JavaScript. Using media queries or grid/flex is more appropriate.

How to create a reusable debounce function?

Now adding clearTimeout/setTimeout pairs throughout the code is sometimes good enough. We can also do this without keeping track if the time variables. Thus, we can keep it inside a function scope:

function debounce(callback, delay) {
  let timeout;
  return (...args) => {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => callback.apply(context, args), delay);
  };
}

Using the debounce function, we can rewrite the first example in a shorter form as:

const search = document.createElement('input');
const suggestions = document.createElement('div');

search.addEventListener('input', debounce(() => {

  fetch(`/api/search?query="${encodeURIComponent(search.value.trim())}"`)
    .then((response) => response.json())
    .then((body) => {
      suggestions.textContent = body.join(', ');
    });

}, 300));

search.type = 'search';
search.placeholder = 'Please enter your query...';
document.body.appendChild(search);
document.body.appendChild(suggestions);

This will keep your code delayed yet performant.

Do you use debounce functions in your code? How is it better than setTimeout/clearInterval? Let me know👇🏻

Become a Javascript Magician with these tricks!

Sobhan Dash — Fri, 22 Apr 2022 03:36:57 +0000

Do you know how to perform tricks?
Maybe a card trick or something that involves ease of work or sleight of hand?

Being a developer means we get to work with lots of code. More often than not, it gets tedious.
How do we solve them? Easy!

We use certain tricks that simplify complex code and bring more efficient work to the table.

I've brought some tricks in JavaScript which will do exactly that.

Get Unique items from an array

You might know about the spread operator.
Do you that we can use it to create an array with no duplicate values from the original array?

const arr = ["dogs", "cats", 1, 1, "lion", "lion"]
console.log(arr)
//OP: ["dogs", "cats", 1, 1, "lion", "lion"]

const uniqueArr = [... new Set(arr)]
console.log(uniqueArr)
//OP: ["dogs", "cats", 1, "lion"]

Easy conversion to a number

Any JavaScript beginner would know, that by adding a number and a string we get a string as output.
We can solve it by using a + operator in front of the string to convert it to a number.

const n1  = 10
const n2 = "20"
const total = n1 + n2
console.log(total)
//OP: 1020

//Fixed Code
const newTotal = n1 + +n2
console.log(newTotal)
//OP: 30

Easy conversion to a string

Similar to the above one, we can convert a number to a string by concatenating empty quotes after the number.

const num  = 10
console.log(typeof num)
//OP:  number

const numStr  = 10 + ""
console.log(typeof numStr)
//OP:  string

Avoid if-else statements

There is a powerful operator known as the ternary operator.
The simplicity of the operator makes our code short and sweet.

const aboolean = false
if(aboolean) {
    console.log("It is True!")
} else{
    console.log("It is False!")
}
//OP: It is False!

// Replacing with the ternary operator
aboolean ? console.log("It is True!") : console.log("It is False!")

Get Max, Min, and Total from an array

The last trick is the "reduce" function.
We use the ternary operator here too to get the values.

const nums = [1, 10, 6, 3, -2, 8]
const maxVal = nums.reduce((a, b) => {
    return a > b ? a : b    
})
console.log(maxVal)
// 10

const minVal = nums.reduce((a, b) => {
    return a < b ? a : b    
})
console.log(minVal)
// -2

const totalVal = nums.reduce((a, b) => {
    return a + b    
})
console.log(totalVal)
// 26

So that's it!
These are some tricks that I discovered recently. I'll use these from now onwards.
Let me know if you know about some more like these and if you follow these tricks on a day-to-day basis!

Replace all occurrences of a String using JavaScript

Sobhan Dash — Wed, 13 Apr 2022 13:41:26 +0000

In the past, we had to do a lot of workaround for simply replacing the frequently appearing string or words in JavaScript.
Well, no more. The idea of this blog is to make you aware of the new function .replaceAll

//For legacy browsers, the following code replaced all occurrences.

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

But now we have the powerful function replaceAll, which matches the word and replaces it with a word.
It can match to a substr or, a regex for identifying what to replace.

const src = 'We replace all the occurrences by replacing the word with keep';

const replaced = src.replaceAll('replace', 'keep');

console.log(replaced);
// Outputs: This string keeps two occurrences of the substring keep

console.log(src)
//Outputs: We replace all the occurrences by replacing the word keep

The interesting thing is that the original string remains unchanged.
The function .replaceAll is available in all major browsers since Firefox 77, Chrome 85, and Safari 13.1.

A general view of the function would be:

replaceAll(regexp, newSubstr)
replaceAll(regexp, replacerFunction)

replaceAll(substr, newSubstr)
replaceAll(substr, replacerFunction)

Are there any alternatives?

Sure there are.
Earlier, the replace function only replaced the first occurrence. So like I said above, we need to call it with a global flag until every word gets replaced.

When we use the regex with the g flag, it works for legacy browsers as well.

const src = 'My favorite color of all colors is orange';

const replaced = src.replaceAll(/color/g, 'fruit');

console.log(replaced);
// Outputs: My favorite fruit of all fruits is orange

Similarly, we can use join and split methods to replace the words.

const src= 'Are we live? lively folks!';

const replaced = src.split('live').join('home');

console.log(replaced);
// Outputs: Are we home? homely folks!

That's it from my side. I learned a new function and wanted people to be aware of this.
Let me know if there are similar functions as replaceAll that can be used to replace our tedious ways!

How to become Phenomenal in just 3 months!

Sobhan Dash — Wed, 06 Apr 2022 14:00:51 +0000

Being Phenomenal is to live in the fast lane.
At least that's what I learned in the last 2 months.

What do we do wrong?

Most people live a debit life.
It is a life where we struggle to keep up with the deadlines or sloth around till panic sets.
We wait till the exams come close or the interview date is finalized, we notice that we are getting fatter or inactive, etc. We often put away the things that we want to do till later, be it reading a book, meditating, or even as simple as drinking water every day.

In most cases, we create a version of ourselves that is destroying not only the present but the future of our life. Even though we are aware of the consequences we rarely act on them and the cycle repeats itself.

So why don't we just move away from the debit life?
A simple answer would be a comfort zone.
The comfort zone is our sweet space which lets us do anything we want without the fear of loss or failure.
It's a candy that never ends but it eventually destroys our teeth. And to get out of that is the hardest decision that one can make.

From my own experience, even though I knew what would happen if I didn't act on the plans I made or the goals that I had set for myself. Soon, the consequences came to bite me back. I didn't prepare well for my interviews so I busted them. I didn't exercise and pain and inactivity set in my body, Didn't drink water? Dehydration. Didn't meditate? Anger and Anxiety issues.

I'm sure you might have encountered similar things in your life.
So what can be done to become the phenomenal version of yourself? to live in the fast lane and enjoy things as well as get things done?

Path to becoming Phenomenal

My mentor came up with this awesome yet simple formula. Get yourself a squared Notebook, that most of us have used in our kindergarten days for writing maths.

Mark your goals for the month in quantitative form.
Be as specific as you can, What the goal is, where you want to refer from, etc.
Make each day of the month count. You also need to give yourself buffer days.
I work 6 days a week and 1 day is for pure fun. This prevents burnout and keeps you energetic throughout the month.
Keep in mind the goals should not be not so big that you can't achieve or so small that you can get it done by lazing around.

Once you have set your goals and have mentioned them in your copy start by maintaining an everyday log. Mark the times that you want to focus on the work. Each block on the copy denoted 10 minutes. 60 minutes, 6 blocks. Mention the minutes as columns and each row will be 1 hour. Ex-

If you are working on your goals then color them, else mark an "X".
Be harsh on yourself.
What do I mean by that?
If you are deviating even a little bit from your goals, put a cross.
Ex- If your goal is to do DSA questions and you're watching videos to solve those questions, then you need to put a cross(X), as you are not actively working on the goal.

When we put a cross(X), we realize that we are wasting time. And time is the main essence here, we think we have lots of it. We don't. At the very least, not enough time for the version of us that we conjure in our minds.

I went from 1-3 hours a day working to 8-9 hours a day in just 2 months. You gain focus, commitment and boost your self-esteem.

Problems you'll face in the journey

The common issue would be that you'll fall back to the old debit life easily. You'll think I have a month I can do it anytime, trust me you can't. If you can, then you didn't choose your goals correctly. If you see that you are not getting your desired results then you have to sacrifice.
Sacrifice your food, sleep, and friends, but the goals must be achieved.

I had this quote that I followed when I was a kid,

"Work hard, Play hard."

I don't know where I picked it up, but I followed it for the longest time. But something changed, and I dropped it. But when I started this routine, I got reminded of it and relished how much fun it was to follow it.

You might also encounter people who will try to deviate from your goals. Don't let them.
They won't be there when you require them the most. If they do understand what you're doing,
They will join you in this journey. Make a mini-cult among yourselves.

The biggest enemy that you have to be very alert about, is your mind.
Why? Because it will justify every wrongdoing. If you slack off it will say, "Meh! We can do it later."
If you don't keep up with your goals it'll just say "You worked hard, but this is your limit." It will trick you till the end. And if you fail, you'll lose your self-respect. Don't let it happen. Keep your head high.

Well, that's pretty much what I've learned. I'll end this with another one of the quotes by my mentor.

When you're working everyone should think, how can someone work so hard, and when you're having fun, people around should think that no one can have as much fun as you can.

Why undefined is the master of all things and null is none

Sobhan Dash — Wed, 30 Mar 2022 13:41:03 +0000

Do you like to repeat yourself? In any way, text, speech, or code?
No right? Me too

To be phenomenal developers, we need to maintain a level of complexity and variations which are more accessible to the devs taking over after us.

Let's start with the difference between null and undefined.
When a variable or a property on an object does not have a value, it is undefined.
Whereas for a variable to be null, we need to assign it a null value.
So, when the variable already has no value, there is no point in declaring it again with another type. In the end, both have the same meaning.

So repeating yourself is pointless.
More often, we will encounter a situation where we need to check for both types, null and undefined, to tell them apart from other falsy values like 0, '', or false.

if (value === undefined || value === null) {
  // Write some fallback code
}

What do you think will happen if we check other values in the same "if" statement?
The number combinations explode, right?

A question for you.
What does document.querySelector('badtagname') return?
If you can't answer, here's the spoiler alert.

SPOILER!
It returns null.
Now, that's a pain.
But we can bypass it into something like this:

const element = document.querySelector('badtagname') || undefined;

This way, we prevent any null values from leaking into the rest of the code.
Similarly, other functions that fetch values from the DOM tree can be managed.

Be careful when working with numeric values or booleans. They would convert 0 to undefined.
For cases like that, use typeof:

value = typeof value === 'number' ? value : undefined;

My friend had a question while I was figuring this blog out.
I use null in other languages, and it's familiar to me.
In addition to that, it's just 4 letters compared to undefined.
So why not continue using it in JavaScript?

I had only one solution to that.
We as developers need to adopt the ways of the language or tech that we are currently working on.
undefined will always be there.
For example, if we are trying to access some property that might be missing like, myObject.iDoNotExist,
And if we assign it a null value, we will create a mixed mess.

JavaScript, since its inception, created both null and undefined for some reason, while other languages don't distinguish both. If you have the answer to this, please comment down below!

Well, one last question to be answered, I guess.
Can we use null in JSON?
The simple answer undefined type does not exist in JSON structures.

What we can do is hover-assign null to a property {"someProperty": null}.
Although, if the property someProperty has no value, it's better to exclude it.
Such properties don't give us extra benefits but increase the payload size, which will be sent over a network or stored in a file.

The following code might add an additional check for you to keep using undefined.
Add it to your .eslintrc:

{
  "plugins": [
    "no-null"
  ],
  "rules": {
    "no-null/no-null": 2
  }
}

That is all!
If you got some value from this, share it with your friends and let me know if I missed something!

Let's Build a Night Sky using Pure SCSS!

Sobhan Dash — Wed, 23 Mar 2022 09:31:43 +0000

I was working on a new version of my portfolio and thought, let's go a little on the learning side. So I researched a bit and decided to use scss.

I decided to create a night sky effect. So here it is!

HTML Code

<div class="main-container">
      <div class="sub-container">
        <div class="sky">
          <div class="stars"></div>
          <div class="stars2"></div>
          <div class="stars3"></div>
          <div class="comet"></div>
        </div>
      </div>
</div>

Nothing special here, just a few divs for different sizes of stars and a comet.

Let's move on to the good stuff!

Constant variables(SCSS)

Before moving on to the various properties, a few constants need to be defined.

$starFieldWidth: 2560;
$starFieldHeight: 2560;
$starStartOffset: 600px;

$starOneScrollDuration: 100s;
$starTwoScrollDuration: 125s;
$starThreeScrollDuration: 175s;
$numStarOneStars: 1700;
$numStarTwoStars: 700;
$numStarThreeStars: 200;
$numComet: 10;

html {
  height: 100%;
  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

Much of it is self-explanatory. We have 3 types of stars which will have slightly different sizes. They have their transition durations as well. The width and height spread out the stars a bit, it is of course personal preference so go wild.

Main Container

.main-container {
  display: block;
  position: relative;
  width: 1200px;
  height: 600px;
  background: linear-gradient(to bottom, #201c2f 0%, #100751 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

You can change the width and height to your preference, the rest are just to center it to the middle and give a galactic feel to the background.

Function to create the stars

@function create-stars($n) {
  $stars: "#{random($starFieldWidth)}px #{random($starFieldHeight)}px #FFF";

  @for $i from 2 through $n {
    $stars: "#{$stars} , #{random($starFieldWidth)}px #{random($starFieldHeight)}px #FFF";
  }
  @return unquote($stars);
}

We are creating a function to generate stars at random positions in the sky. The function will be used as a shadow. So let's see how!

Animations

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-#{$starFieldHeight}px)
      translateX(-#{$starFieldWidth}px);
  }
}

@keyframes animShootingStar {
  from {
    transform: translateY(0px) translateX(0px) rotate(-45deg);
    opacity: 1;
    height: 5px;
  }
  to {
    transform: translateY(-#{$starFieldHeight}px)
      translateX(-#{$starFieldWidth}px) rotate(-45deg);
    opacity: 1;
    height: 800px;
  }
}

As you can see, we are moving from the bottom right to the top left of the container in the animations. And with the random stars getting generated, we get a lively feel to the sky.

Star Templates!

@mixin star-template($numStars, $starSize, $scrollSpeed) {
  z-index: 10;
  width: $starSize;
  height: $starSize;
  border-radius: 50%;
  background: transparent;
  box-shadow: create-stars($numStars);
  animation: animStar $scrollSpeed linear infinite;
  &:after {
    content: " ";
    top: -$starStartOffset;
    width: $starSize;
    height: $starSize;
    border-radius: 50%;
    position: absolute;
    background: transparent;
    box-shadow: create-stars($numStars);
  }
}

@mixin shooting-star-template($numStars, $starSize, $speed) {
  z-index: 10;
  width: $starSize;
  height: $starSize + 80px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  animation: animShootingStar $speed linear infinite;
}

For those who are not familiar with scss, mixins allow us to define styles that can be re-used throughout your stylesheet.
It is kind of like a component/function which can be called multiple times.

Here the star template is generating the stars using the above function.

Will the above code work?

Not really. Unless we use the mixins, we don't see any results, so to get them we need to use @include.

.stars {
  @include star-template($numStarOneStars, 1px, $starOneScrollDuration);
}
.stars2 {
  @include star-template($numStarTwoStars, 2px, $starTwoScrollDuration);
}
.stars3 {
  @include star-template($numStarThreeStars, 3px, $starThreeScrollDuration);
}
.comet {
  @include shooting-star-template($numComet, 5px, 10s);
}

Working Pen

And that's the end! Pretty simple right? Use it in your next project, and let me know how it worked for you.

When can we use div, and What's the importance of semantic HTML

Sobhan Dash — Wed, 16 Mar 2022 12:37:26 +0000

If you know even a little bit of HTML, then you know about the <div> tag.
Now, <div>s are used for CSS styling, JavaScript functionalities, and ARIA for accessibility. And its versatility makes it easier to throw at everything.

However, with the introduction of so many semantic HTML tags, it is not ideal that we keep using the <div> for everything. We also don't have to stop using <div> tags completely. We simply have to know when to use div and when proper semantic tags.

Div-history

HTML 3.0 introduced div to structure the content or divide it into different kinds of containers, sections, etc.
It was a replacement for people using the <table>tag for structuring their content. And it did the job perfectly.

After the next version of HTML was released(HTML 4.0) the <span> tag became replacement of <center> tag. The <div> tags took over the mantel of structuring data on block level while <span> tags did the same for inline content.

And soon, the problem was clear. We had no proper way to programmatically define the semantics of the elements. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) was introduced to make the web more accessible to people with disability. But non-semantic tags or elements pose a heavy problem.

New age div

Well, it amounts to nothing. Yep, it does not represent anything. It adapts to anything and everything. Even the official docs say that the use of div should be the last resort.

So let's start by eliminating when not to use <div>s.

<div class="button" onclick=handler()>
  Why?
</div>

The above is for a button, and anyone can tell it is a clear misuse of <div>. So anything that has a clear definition in HTML docs and has extensible features readily available should not be recreated using <div>. Ex- Buttons, sections, headers, etc.

<body>
  <div class="header">
       ...
  </div>
  <div id="main">
       ...
  </div>
  <div class="footer">
       ...
  </div>
</body>

The above code is also wrong structurally. We can replace the <div>'s with the appropriate elements or specify ARIA to assign any necessary role, state, and property attributes where necessary (Ex- <div role=main>).

When are div's A-ok to use?

<div>s are fine to use under various circumstances. Such as when we use it as a wrapper for a foreign language. Ex-

<div lang=es>
  <h3>...</h3>
  <p>...</p>
  <ul>
    <li>...
    <li>...
    <li>...
    ...
  </ul>
  ...
</div>

Instead of using it on every single element, we can wrap all of them with a div and assign the lang attribute to it.

Similarly, we can use the tag freely when using it for styling.

<main>
  <div class="intro" style="display: flex; ...">
    <div style="flex: ...">
      <h1>...</h1>
      <!-- sub-heading / meta data could go here -->
    </div>
    <div class="social_links" style="flex: ...">
      <!-- social follow links -->
    </div>
  </div>

  <!-- other semantic elements / content go here -->
</main>

A question would have popped right now. Isn't it bad to use <div>s to structure content?
Yes, it is, however, if the accessibility can be ignored and specifically focus on the styling part then it is okay to use <div>s.

Of course, it is not encouraged and the above example requires important details to be more accessible.

When does using `<div>`tags go out of hand?

Let's see with an example:

According to the above code by Scott Ohara, there are various ways to implement a paragraph. We can create multiple implicit paragraphs whenever we create a new block of text.

This just shows how using semantic HTML doesn't provide free accessibility. We need to do a little extra effort to make it so.

What to do then?

Use semantic HTML whenever possible, use div as a last resort, and certainly don't fret over which one is better. If we look from an accessibility point of view then we do need to go that extra few meters and make it so regardless of what we are using.

Check out the awesome presentation by Eric Bailey: The intersection of performance and accessibility. and the more detailed blog of Scott Ohara: Div Divsiveness.

Let me know if there is any more information that I should keep in mind!👇🏻

Forem: Sobhan Dash

What the heck is JSON.parse() and JSON.stringify()?

What is the JSON.parse method?

Syntax:

What do the parameters mean?

What do we get as return value?

Example

What is the JSON.stringify method?

Syntax:

What do the parameters mean?

What do we get as return value?

Example

Javascript Array Methods

How to simply use Font Awesome 6 in React

Installation

Implementation

What is Map object and its applications

Become the warrior of the night(Shhh! It's dark mode)

Header

App

CSS

Debounce your way through tough resource-intensive tasks in JS

Why do we need Debounce?

How long should the debounce timeout be?

How to create a reusable debounce function?

Become a Javascript Magician with these tricks!

Get Unique items from an array

Easy conversion to a number

Easy conversion to a string

Avoid if-else statements

Get Max, Min, and Total from an array

Replace all occurrences of a String using JavaScript

Are there any alternatives?

How to become Phenomenal in just 3 months!

What do we do wrong?

Path to becoming Phenomenal

Problems you'll face in the journey

Why undefined is the master of all things and null is none

Let's Build a Night Sky using Pure SCSS!

HTML Code

Constant variables(SCSS)

Main Container

Function to create the stars

Animations

Star Templates!

Will the above code work?

Working Pen

When can we use div, and What's the importance of semantic HTML

Div-history

New age div

When are div's A-ok to use?

When does using <div>tags go out of hand?

What to do then?

When does using `<div>`tags go out of hand?