DEV Community: Sanchithasr

How to customize the viewport in the Storybook

Sanchithasr — Sun, 11 Jun 2023 10:50:16 +0000

This blog talks about customizing the storybook viewports and making testing UI elements easier.

While creating UI elements on the storybook we might have to test UI elements according to the breakpoints we have defined in our project. This blog post provides a guide on how to add customized viewports in Storybook.

By default, Storybook uses a minimal set of viewports to get us started. But we are not restricted to these. The addon offers a more granular list of devices. We can also define our viewports customized to breakpoints in the project.

I have created a storybook for my React + TS + MUI project. There are default viewports in this storybook now.

I need to have a variety of devices listed to properly test my components. Let’s delve into the use of addons to establish different viewports, which can be accomplished by modifying preview.js.

Let’s import INITIAL_VIEWPORTS in my preview.js and feed it to viewports in the parameters.



//.storybook/preview.js

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';



export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

We can see more devices now. Very helpful to test UI on the spot.

Let’s define custom viewports now.

Let’s define the viewports to match the breakpoints that have been defined in the project.



   xs: 350,
        sm: 600,
        md: 900,
        lg: 1200,
        xl: 1536,

//  breakpoints from my project

Let’s define the below array in my preview.js. And add that to the viewports in the parameters.



const customViewports = {
  xs: {
    name: 'XS',
    styles: {
      width: '350px',
      height: '963px',
    },
  },
  sm: {
    name: 'SM',
    styles: {
      width: '600px',
      height: '801px',
    },
  },
  md: {
    name: 'MD',
    styles: {
      width: '900px',
      height: '801px',
    },
  },
  lg: {
    name: 'LG',
    styles: {
      width: '1200px',
      height: '801px',
    },
  },
  xl: {
    name: 'XL',
    styles: {
      width: '1536px',
      height: '801px',
    },
  },
};

This is how my preview.js looks.




const customViewports = {
  xs: {
    name: 'XS',
    styles: {
      width: '350px',
      height: '963px',
    },
  },
  sm: {
    name: 'SM',
    styles: {
      width: '600px',
      height: '801px',
    },
  },
  md: {
    name: 'MD',
    styles: {
      width: '900px',
      height: '801px',
    },
  },
  lg: {
    name: 'LG',
    styles: {
      width: '1200px',
      height: '801px',
    },
  },
  xl: {
    name: 'XL',
    styles: {
      width: '1536px',
      height: '801px',
    },
  },
};

export const parameters = {
  viewport: {
    viewports: customViewports,
  },
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

You can see your custom sizes in the storybook.

If you want both INITIAL_VIEWPORTS and customViewports in your storybook, simply do this.



     viewports: {
        ...MINIMAL_VIEWPORTS,
        ...customViewports,
      },

And that sums it up. You can find the link to the repository here. Comment below if it helped you!!

How to Implement Storybook in React + TypeScript + Material UI application

Sanchithasr — Sun, 04 Dec 2022 09:19:57 +0000

Storybook is a UI development tool that lets you preview your components in a very rich library design that will help you to change all props for the component and test out your component in different scenarios. Storybook is becoming popular these days and is extremely helpful in the product development lifecycle.

This blog talks about how to implement Storybook in a React + TypeScript application.

Let’s start with creating a React + TypeScript application and then adding storybook to it.

npx create-react-app storybook-app --template typescript
cd storybook-app
npx storybook init

We have our application ready and now are ready to run the storybook.

npm run storybook

The above command will run the storybook. You should see something like below in your browser. Adding Storybook to your application will add a boilerplate to your repository.

Adding Material UI to our application.

npm install @mui/material @emotion/react @emotion/styled

Now let’s start writing a story for our MUI components. I will be deleting the boilerplate folder stories from my application.

I am creating a folder called components for MUI components and writing a button story and button component inside the folder button.

Now that we have our files created, let’s write template for the button. The button label is added as a prop.

import Button from '@mui/material/Button';

type ButtonProps = {
    label: string
}

function TextButton({label}: ButtonProps) {
  return (
    <>
        <Button variant="contained">{label}</Button>
    </>
  )
}

export default TextButton

Let’s write a simple basic story for our button.

import TextButton from "./TextButton"
import { ComponentMeta, ComponentStory} from "@storybook/react"

export default {
    title: "Components/Button",
    component: TextButton,
} as ComponentMeta<typeof TextButton>

export const Submit = () => <TextButton label="Submit"/>

export const Check = () => <TextButton label="Check"/>

We can see our story in the storybook but we don’t see any controls.

Now that we know how to write the basic story, let’s use args and rewrite our story. It is always good to practise writing stories using args. One reason is that props from our component are converted to controls in the storybook.

import TextButton from "./TextButton"
import { ComponentMeta, ComponentStory} from "@storybook/react"

export default {
    title: "Components/Button",
    component: TextButton,
} as ComponentMeta<typeof TextButton>

const Template: ComponentStory<typeof TextButton> = (args) => <TextButton {...args} />;

export const Submit = Template.bind({});
Submit.args = {
  label: 'Button',
};

export const Check = Template.bind({});
Check.args = {
  label: 'Button',
};

We can see the controls in the storybook now.

We have now successfully written a story for our button.

Conclusion:

That’s a simple example of adding Storybook to React + TypeScript application. You can find the complete code here.

References:

6 Ways to Convert a String to an Array in JavaScript

Sanchithasr — Sat, 24 Sep 2022 07:50:08 +0000

Arrays are the most powerful data structure in JavaScript. I found myself solving many algorithms by converting strings to arrays. So I thought of consolidating and comparing various ways to do the same.

Converting from string to array is always done using the split() method but after ES6, there are many tools we could do the same. Let’s go through each method one by one and discuss the pros and cons of each.

1. Using .split(‘’):

split() is a string method that splits a string into an array of the ordered list with a pattern. This is an ES6 method and is the cleanest way to get the job done.



////* Seperate string by space character(' ') *////

const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split('');
console.log(myFavShowArray) 
//['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

Another advantage of this way is we can separate strings by characters or whitespace. Below is an example of how we can do it.



////* Seperate string by whitespace(' ') *////
const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split(' ');
console.log(myFavShowArray) //['The', 'Office']

////* Seperate string by a character '-' *////
const favDialogue = 'Thats-what-she-said';
const favDialogueArr = favDialogue.split('-');
console.log(favDialogueArr) //['Thats', 'what', 'she', 'said']

It also works well with Regex too. You can find the complete documentation of split() here.

This way flawlessly separates the string elements into an array but it has its limitations.

NOTE: This method does not work very well with uncommon Unicode characters. This method returns the Unicode of the characters instead of actual characters which might make our job a bit more complicated(refer here) but the MDN document has been updated so that we can make it work with Unicode if we just include u flag. See here for more information.



"😄😄".split(/(?:)/); // [ "\ud83d", "\ude04", "\ud83d", "\ude04" ]
"😄😄".split(/(?:)/u); // [ "😄", "😄" ]

2. Using spread syntax ([…str])

This is the ES2015 feature that makes the transition very easy.



const myFavShow = 'The Office'

const myFavShowArray = [...myFavShow]

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

It also helps that the limitation we have in the split() has been eliminated here. Consider the below example. We can split any characters easily using this method.



const animal = '🦊🦊'
const animalArr = [...animal]
console.log(animalArr) // ['🦊', '🦊']

3. Using Array.from(str):

The Array. from() method creates a new, shallow-copied Array instance from an iterable or array-like object.



const myFavShow = 'The Office'

const myFavShowArray = Array.from(myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

This method will not cause any issues when dealing with uncommon characters.



const str = '😎😎'
const arr = Array.from(str)
console.log(arr)


// ['😎', '😎']

4. Using Object.assign([], str)

The Object. assign() method copies all the properties from one or more source objects to a target object. There are two things to keep in mind about this method though. One is that Object. assign() copies property values called deep copy (Refer here to know the difference between deep copy and shallow copy). One has to keep this in mind before using this method before using it.



const myFavShow = 'The Office'

const myFavShowArray = Object.assign([], myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

Another is that we have the same trouble as the split() method: it cannot separate uncommon characters (we see Unicode instead of actual characters).



const s = '😄😄'
const a = Object.assign([], s);
console.log(a) // ['\uD83D', '\uDE04', '\uD83D', '\uDE04']

5. Using old school method (`for loop` and `array.push()`)

Although we have a lot of options to play around with, I had to mention this old-school method where we push the elements of the string using the for loopand array method push().

This is not the cleanest way of doing it but it is most definitely worth mentioning who want to stay away from the changing complexities of JavaScript (Although I would prefer other ways).



const s = 'the office';
const a = [];
for (const s2 of s) {
   a.push(s2);
}
console.log(a); 
// ['t', 'h', 'e', ' ', 'o', 'f', 'f', 'i', 'c', 'e']

Also, it works very well with uncommon (Unicode) characters. Look at the below example.



const s = '𝟘𝟙𝟚𝟛😄😄';
const a = [];
for (const s2 of s) {
   a.push(s2);
}
console.log(a); //['𝟘', '𝟙', '𝟚', '𝟛', '😄', '😄']

6. Using Array.prototype.slice.call(‘string’)

Refer to this blog to understand more about .slice.call()method.



const favShow = Array.prototype.slice.call("The Office!");
console.log(favShow); //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e', '!']

This method also has the same problem as the split() method so be aware while using it.



const favShow = Array.prototype.slice.call("😄😄");

console.log(favShow); //['\uD83D', '\uDE04', '\uD83D', '\uDE04']

References:

Conclusion:

To sum it all up, below are the ways we can do the job.

That’s 6 ways to convert string to array in JavaScript. Comment below if you used any other methods to get the job done.

Thank you for reading!

What is a nullish coalescing operator (??) in JavaScript?

Sanchithasr — Mon, 04 Jul 2022 11:18:39 +0000

The nullish coalescing operator is a logical operator that can be extremely powerful that could make our lives lot easier in some cases. And with this, we can write the most efficient logic.

ES11 introduced the nullish coalescing operator denoted by the double question marks (??).

Syntax:

The operator is written as two question marks ??.

The syntax of the Nullish coalescing operator is,

leftExpr ?? rightExpr

Here are the examples of how operator works,

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

null ?? 'test' // returns 'test'
undefined ?? 56 // returns 56
null ?? 0 // returns 0
45 ?? 25 // returns 45

How it works?

Consider the below example of the operator. The nullish coalescing operator is a logical operator that accepts two values:

const result = value1 ?? value2

The above statement returns the second value (value2) if the first value (value1) is null or undefined. Or else, it will return the first value (value1).

Technically, the above logic is equivalent to the following block:

const result = value1;
if(result === null || result === undefined) {
   result = value2;
}

In other words,

Let’s assume null and undefined as similar in this context and assume ‘defined’ as something that is not null or undefined

We can define our example as something like this,

The result of value1 ?? value2 is,

If value1 is defined, then return value1
If value1 is not defined, then return value2

Let’s look at more examples of Nullish coalescing operator.

In the below example, we have null in the first value and the string in the second value. Since we have null in the first value, the second value (‘default string’)is returned.

const nullValue = null;
const foo = nullValue ?? ‘default string’;
console.log(foo);
// expected output: “default string”

Let’s look at one more example where the first value is returned.

const someNumber = 42;
const valC = someNumber ?? 0;
console.log(valC);
// expected output: “42”

Since we have a number in the first string, the first value(someNumber or 42) is returned.

Consider the below example, Note that the first value needs to be null or undefined for the ??operator to return the second value. Empty string or 0 is not considered.

const emptyText = ""; // falsy
const valB = emptyText ?? "default for B";
console.log(valB); // "" (as the empty string is not null or undefined)

How is it different from logical OR (`||`) operator?

The OR (||) operator can be used in the same way as ?? . We can get the same results for the above examples.

But,

there is one difference between || and ??.

|| returns the first truthy value.
?? returns the first defined value.
In other words, || doesn’t distinguish between the below values (falsy)

false
0
an empty string (“”)
null
undefined

They are called – falsy values. If any of these is the first argument of ||, then we’ll get the second argument as the result.

0 || 2 // returns 2
0 ?? 2 // returns 0

where as ?? considers only null and undefined unlike ||.

Conclusion:

And that’s how ??operator works. Comment below if you have used this operator in your code. Thank you.

How to Communicate between Components in Vue.js

Sanchithasr — Sat, 24 Apr 2021 15:06:27 +0000

Every framework has its own unique architecture but they have one thing in common. The entire page is divided into small components where the component has its own functionalities and UI. And sometimes, we need a way to communicate between these components.

Generally, we use Vuex (State management tool) to store the data and use it across components. But sometimes, we need a way to send the data from one component to another without using the Vuex store. In this article, we will learn the possible ways of achieving that.

There are five ways to send the data from one component to another:

1. Using Props (Parent to Child Communication)

2. Using Events (Child to Parent Communication)

3. Using Event Bus (Communication between any components)

4. Using provide/inject (Parent to Child Communication)

5. Using this.$refs (Parent to Child Communication)

Let’s study them one by one and see how they work.

1) Using Props (Communication from parent to child )

One can send data from parent-to-child components using props. In the below example, we are sending the data from parent. vue to child. vue via the prop message.

Child Component

We have created a component that prints the message. We have defined a variable in props called message which we are rendering in the template.

Parent Component

While we nest the child component inside our parent component, we are binding the data we want to send by using the directive v-bind and sending the data using props.

Any time the parent changes the prop, the new value is sent to the child and rerendered.

2) Using Events (Communication from child to parent )

This is similar to props but we are sending the data from child to parent and instead of using v-bind, we are using directive v-on for capturing.

We have defined a variable in the child component which contains our message. We are sending the same to the parent component by firing an event from the child component.

this.$emit(’name-of-the-event’, args1, args2, args3,...) is a way to fire the event. This is captured on the parent component using directive v-on. Note that one should use the same event name they sent while capturing and can retrieve the arguments.

Child Component
Parent Component

Any time the message in the child component changes, the new value is sent to the parent and rerendered.

3) Using Event Bus (Communication between any two components)

An event bus is used to communicate between any two components (Components need not have a parent-child relationship). This can be used when one needs to manually listen for events on a component instance.

You can just send the data from one component using this.$root.$emit(’name-of-emitter’, args1, args2, ...) and is captured using the same name like this this.$root.$on(’name-of-emitter’, args1, args2, ...) in the other component.

Child Component

Note that we are using mounted() {} to capture the event in component-two. vue.

Parent Component

4) Using Provide/Inject (Parent to child communication)

This is used in the structure where you have deeply nested components and you only need something from the parent component in the deeply nested child.

In that case, you still need to pass the prop down the whole component chain which might be annoying. For such cases, we can use the provide and inject pair.

Although the example we have here is very simple, we are still sending a message from parent to child and hence it works.

We are using our parent component as a provider, sending the data, and injecting it into the child component using the same name.

Child Component

Parent components can serve as dependency providers for all its children, regardless of how deep the component hierarchy is.

5) Using this.$refs (Parent to Child Communication)

This method is the least preferred way of making the communication but it is one of the options available.
Despite the other methods, sometimes you might still need to directly access a child component. To achieve this you can assign a reference ID to the child component using the ref attribute.

Parent Component

Here we are referencing the child component as ‘child’ (ref= child) (reference ID) and then capturing it using this.$refs.child. We can access anything related to the child component in this way.

ChildComponent

Conclusion:

And that sums it up. Comment below if you know other ways of communication between components in Vue.js. Thank you.

How to Overlay Icons on Top of Images with CSS

Sanchithasr — Sat, 27 Feb 2021 06:56:39 +0000

Recently I worked on a project where we had to make a custom image gallery. The requirement needed me to place many components like icons, texts, another image, and many other things on the image. While doing that, I learned about the steps to overlay the components on the image which I would like to share. Let's build a video player page to understand how the overlaying of icons works in CSS.

Let’s consider the below template. We have an image on which we need to place the play button in the center and like button at the top-right corner of the image.



<h2>Video Player</h2>
<p>Hover over to play the video</p>
<div class="container">
  <div href="#" class="like-button" title="Like Button">
    <i class="fa fa-heart fa-1x"></i>
  </div>
  <img src="https://staticvideos.pexels.com/videos/1448735/pictures/preview-0.jpg" alt="Beautiful Image" class="image">
<div class="overlay">
  <button href="#" class="play-icon" title="Video Play">
   <i class="fa fa-play"></i>
 </button>
</div>
</div>

First, let’s start by adding some styling to the page and the components.



body {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.image {
 width: 100%;
 height: auto;
}

.overlay {
 height: 100%;
 width: 100%;
 opacity: 0.3;
 transition: .3s ease;
 background-color: transparent;
}


.container:hover .overlay {
 opacity: 0.7;
}

.play-icon {
 color: black;
 font-size: 2rem;
 cursor: pointer;
}

.like-button {
color: red;
font-size: 20px;
cursor: pointer;
border-radius: 10rem;
background-color: transparent;
border: transparent;
}

.like-button :hover {
color: red;
}

We have styled the components and now they are ready to be placed on the image. Normally when we write the elements, the components are stacked vertically like below.
But we need to overlay the two icons on the image in the position we want. We can achieve it by using the following steps.

Step 1. Assign the Positions

This is the most important step. The first step to enclose the components along with the image as one element and assign the CSS property position: relative. And the icons we need to place on the image are assigned the property position: absolute.
In this case, we are adding the class .container( which encloses the image and the icons) position: relative, and the icons we overlay are assigned the property position: absolute.
You can know more about the position property in CSS below.

CSS Property: Position

Step 2. Assign z-index higher than the image to the icons if necessary

In this case, I am assigning z-index to the div of icons ( .overlay and .like-button ) which is higher than that of the image so that they are overlayed on the image. In some cases, it is not required to add if the default indices of the components are favorable to our requirement. But make sure to check and add.
We have added the positions and z-index in the below code.



 body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .image {
            width: 100%;
            height: auto;
        }

        .overlay {
            position: absolute;
            height: 100%;
            width: 100%;
            opacity: 0.3;
            transition: .3s ease;
            background-color: transparent;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 400px;
        }


        .overlay:hover {
            opacity: 0.7;
        }

        .play-icon {
            position: absolute;
            color: black;
            font-size: 2rem;
            cursor: pointer;
            left: 50%;
            bottom: 50%;
        }

        .fa-heart {
            position: absolute;
            z-index: 2;
            color: red;
            position: absolute;
        }

You can know more about the z-index here.

Step 3. Position the icons accordingly using the other CSS properties

Since we have our icons placed on the image, let’s move the play button to the center and the like button to the top-right end of the image using few properties.



        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .image {
            width: 100%;
            height: auto;
        }

        .overlay {
            position: absolute;
            height: 100%;
            width: 100%;
            opacity: 0.3;
            transition: .3s ease;
            background-color: transparent;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 400px;
        }


        .overlay:hover {
            opacity: 0.7;
        }

        .play-icon {
            position: absolute;
            color: black;
            font-size: 2rem;
            cursor: pointer;
            left: 50%;
            bottom: 50%;
        }

        .fa-heart {
            position: absolute;
            z-index: 2;
            color: red;
            position: absolute;
        }

We have added some transitions when the user hovers over the icons to make the page look more beautiful.

Conclusion

And that sums it up! Comment below if you have any feedback. Please find the example of the project here. Thank you for reading.

3 ways to check if variable is a number in JavaScript

Sanchithasr — Wed, 27 Jan 2021 07:23:57 +0000

I was building a form the other day in Vue and I had to write number validation for the field so had to write the logic to check whether the input value is number or not. I wanted to list out the few ways I learnt which might be helpful to others.

NOTE: In JavaScript, special values like NaN, Infinity and -Infinity are numbers too - though, we'll be ignoring those values.

1) Using isNan()

The isNaN() determines whether a value is NaN or not. We can take advantage of this to determine whether a variable is number type or not.

var numberOfpushUpsToday = 34; 

if(!isNaN(numberOfpushUpsToday)){
    console.log('It is a number')
}
else {
    console.log('It is not a number')
}

!isNaN(34) // returns true
!isNaN('34') // returns true
!isNaN('Hello') // returns false
!isNaN(true) // returns true
!isNaN(false) // returns true 
!isNaN('undefined') // returns false

Limitations:

1) It returns true for the Boolean values because the Boolean values are converted to numbers 0 and 1 accordingly so it would be misleading sometimes.
2) We have same issue for the null value as well. It returns true and hence one has to be careful while writing the code.

2) Using typeof()

The typeof operator returns a string indicating the type of the unevaluated operand.

num = 45
strng = '34'
typeof num // returns 'number'
typeof strng // returns "string"
typeof undefined // returns "undefined"
typeof null // returns "object"

If the variable is type number, it would return the string number. We can use this to determine if the variable is number type.

var numberOfpushUpsToday = 34; 

if(typeof numberOfpushUpsToday === 'number' ){
    console.log('It is a number')
}
else {
    console.log('It is not a number')
}

The typeof() performs much better than isNaN(). It correctly determines that a string variable, null and Boolean values are not numbers.

3) Using Number.isFinite()

The function isFinite() determines if the passed value is finite. The arguments are first converted to numbers and then checks if the value is finite and hence this is the most best way among all the methods mentioned above.

Number.isFinite(34) // returns true
Number.isFinite('Hello') // returns false
Number.isFinite(undefined) // returns false
Number.isFinite(true) // returns false
Number.isFinite(null) // returns false

var numberOfpushUpsToday = 34; 

if(Number.isFinite(numberOfpushUpsToday) ){
    console.log('It is a number')
}
else {
    console.log('It is not a number')
    }

Conclusion:

Although these methods can get tricky with Boolean values, undefined and null, they are helpful in solving some problems in day to day life. One just have to be careful while writing the code according to their needs.

And that sums it up!!!
Thank you..
Comment below if you have any feedback or thoughts.

Understanding Nested Arrays in JavaScript

Sanchithasr — Tue, 05 Jan 2021 04:46:36 +0000

An array is an ordered collection of values: each value is called an element, and each element has a numeric position in the array, known as its index.

JavaScript lets us create arrays inside array called Nested Arrays. Nested Arrays have one or many arrays as the element of an array. This might be little confusing in definition but it is very interesting once we dig inside.

Creating a Nested Array:

There are three syntax to create an array in JavaScript. Let’s create nested arrays using those three methods to get an idea of Nested Arrays.
This one is just equating the variable to the array.



var favMovies = ['Begin Again', 'Soul', ['Matrix', 'Matix Reloaded', 'Matrix Revolutions'],['Frozen', 'Frozen 2', ['Tangled', 'Alladin']]]

Second one is using the array method new Array().



var favMovies = new Array ( );

favMovies[0] = 'Begin Again'
favMovies[1] = 'Soul'
favMovies[2] = new Array ("Matrix", "Matix Reloaded", "Matrix Revolutions")
favMovies[3] = new Array ("Frozen", "Frozen 2", ["Tangled", "Alladin"])

And the last one is using the Array() which is similar to the new Array() .




var favMovies = Array ( );

favMovies[0] = 'Begin Again'
favMovies[1] = 'Soul'
favMovies[2] = Array ("Matrix", "Matix Reloaded", "Matrix Revolutions")
favMovies[3] = Array ("Frozen", "Frozen 2", ["Tangled", "Alladin"])

Note that all these methods yield the same result. Now that we know how to create the nested arrays, let’s see how to access the elements of the Nested Arrays.

Understanding how indices are assigned to the elements:

The arrays are listed according to the index. Below diagram explains how the indices are assigned to the elements in Nested Array.

Say we want to access the value ‘Tangled’, we can navigate to it using this table.



console.log(favMovies[3][2][0])

Similarly we can access any element with the help of index.

Flatten the nested Array:

There are ways to flatten the nested array. We can turn it into normal array by using the below methods.

1) Using the method Array.flat()

Array.flat() method produces a new array by concatenating all sub arrays recursively up to the depth you specify.
Simply put, if you have an array of arrays (maybe more arrays within them), flat() will help you to join all entries together into a single array .




favMovies = ['Begin Again', 'Soul', ['Matrix', 'Matix Reloaded', 'Matrix Revolutions'],['Frozen', 'Frozen 2', ['Tangled', 'Alladin']]]

flattenedArray = favMovies.flat() // depth is not specified
// expected result: ["Begin Again", "Soul", "Matrix", "Matix Reloaded", "Matrix Revolutions", "Frozen", "Frozen 2", Array(2)]

flatWithDepth = favMovies.flat(2) // depth of 2 is mentioned so we get complete flat array
// expected result: ["Begin Again", "Soul", "Matrix", "Matix Reloaded", "Matrix Revolutions", "Frozen", "Frozen 2", "Tangled", "Alladin"]

2) Using Array.toString() and String.split() methods

We can convert the array to string and the split it using .split() method. That way we get the array.




favMovies = ['Begin Again', 'Soul', ['Matrix', 'Matix Reloaded', 'Matrix Revolutions'],['Frozen', 'Frozen 2', ['Tangled', 'Alladin']]]
favMovies.toString().split(",") 
// expected result: ["Begin Again", "Soul", "Matrix", "Matix Reloaded", "Matrix Revolutions", "Frozen", "Frozen 2", "Tangled", "Alladin"]

Thank you!

What is the Double bang (!!) operator in JavaScript?

Sanchithasr — Thu, 31 Dec 2020 05:15:32 +0000

Every value has truth or false values in JavaScript. For example, a null value has an associated boolean value of false. Similarly 34 has an associated value of true. We can use this to cast a variable to true or false using the double bang operator.

Let’s dive deep into what it is and how it works.

The ! in JavaScript, also called “bang”, is the logical “not” operator. If you place this operator in front of a boolean value, it will reverse the value, returning the opposite.

!true // returns false
!false // returns true

isTrue = true // variable which is boolean
!isTrue // returns false

If the single bang returns the opposite boolean value, imagine what double-bang would return?

The associated boolean value. In other words, true or false according to whether it is truthy or falsy values.

Values that are associated with boolean true are said to be truthy. Values that are associated with boolean false values are said to be falsy.

!!true // returns true
!!false // returns false

isTrue = true // variable which is boolean
!!isTrue // returns true

We can take advantage of this using double-bang on non-boolean values as well which is pretty cool.

isNumber = 34 // variable which is not boolean
!!isNumber // returns true

Truthy values:

In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context.

The following values are few examples that are considered by JavaScript to be truthys:

Object: {}
Array: []
Not empty string: "anything"
Number other than zero: 3.14
Date: new Date();

In the below example, variable something has the non-empty string value which has truthy value in JavaScript so the console will print the first message.

var something = ‘string’;
 if (!!something) {
   console.log('This is truthy')
 } else {
   console.log('This is falsey') 
 }

You can find more about it in the link here.

Falsy values:

A falsy value is a value that is considered false when encountered in a Boolean context.

The following values are few of the examples that are considered by JavaScript to be falsey:

Empty string: ""
0
null
undefined
NaN and the list of falsy values below.

In the below example, variable nothing has the 0 which has falsy value in JavaScript so the console will print the second message.

var nothing = 0;
 if (!!nothing) {
   console.log('This is truthy')
 } else {
   console.log('This is falsey') 
 }

You can find more about falsy values in the link here.

Let us see how we can use it for type casting.

function BankAccount(cash) {
this.cash = cash;
this.hasMoney = !!cash;
}

var myAccount = new BankAccount(80);
console.log(myAccount.cash); // expected result: 80
console.log(myAccount.hasMoney); // expected result: true

var emptyAccount = new BankAccount(0);
console.log(emptyAccount.cash); // expected result: 0
console.log(emptyAccount.hasMoney); // expected result: false

And that sums it up!
Thank You!

3 ways to empty an Array in JavaScript

Sanchithasr — Tue, 22 Dec 2020 10:07:12 +0000

The Arrays are for JavaScript developers like how screws and nails are for carpenters. Hence it is important to know the in and around with how it works. Emptying an array is one of the important concepts involved so here are the few methods I know.

1) Using length property

The length property returns the number of elements in that array. And if we equate this to 0, we will be able to empty the array elements. This method is quite popular but not the fastest way to do the job.

baratheon = ["Robert", "Renly", "Stannis"]
baratheon.length = 0 // empties array

console.log(baratheon) // expected result: []
console.log(baratheon.length) // expected result: 0

2) Assigning it to a new empty array

This is the fastest way of emptying an array. This is perfect if you don’t have any references from other places to the original arr. If you do, those references won’t be updated and those places will continue to use the old array.

baratheon = ["Robert", "Renly", "Stannis"]
baratheon = [] // empties array

console.log(baratheon.length) // expected result: 0
console.log(baratheon) //expected result: []

3) Using Array method splice()

This can be done using the splice() method from the list of JavaScript Array methods. The splice() method takes the index (from which the splicing should start ) and the number of items to be removed as parameters and splices the elements.
We have to pass the 0 as index (the first element) and the length of the array as parameters which ends up emptying the whole array. The performance of this method is almost as fast as assigning the new array method.

baratheon = ["Robert", "Renly", "Stannis"]
baratheon.splice(0, baratheon.length) // empties array

console.log(baratheon.length) // expected result: 0
console.log(baratheon) //expected result: []

And that sums it up. Comment below if you know any other ways to empty an array.

Thank you :)

7 ways to convert a String to Number in JavaScript

Sanchithasr — Wed, 16 Dec 2020 05:42:30 +0000

1. Using parseInt()

parseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is returned.
This method has a limitation though. If you parse the decimal number, it will be rounded off to the nearest integer value and that value is converted to string. One might need to use parseFloat() method for literal conversion.

myString = '129' 
console.log(parseInt(myString)) // expected result: 129

a = 12.22
console.log(parseInt(a)) // expected result: 12

2. Using Number()

Number() can be used to convert JavaScript variables to numbers. We can use it to convert the string too number.
If the value cannot be converted to a number, NaN is returned.

Number("10");          // returns 10
Number(" 10  ");       // returns 10
Number("10.33");       // returns 10.33

3. Using Unary Operator (+)

The unary plus operator (+) precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already.

const x = 25;
const y = -25;
console.log(+x); // expected output: 25
console.log(+y); // expected output: -25
console.log(+''); // expected output: 0

4. Using parseFloat()

parseFloat() parses a string and returns a number. Spaces are allowed. Only the first number is returned.

parseFloat("10");        // returns 10
parseFloat("10.33");     // returns 10.33
parseFloat("10 20 30");  // returns 10
parseFloat("10 years");  // returns 10
parseFloat("years 10");  // returns NaN

5. Using Math.floor()

The Math.floor() function returns the largest integer less than or equal to a given number. This can be little tricky with decimal numbers since it will return the value of the nearest integer as Number.

str = '1222'
console.log(Math.floor(str)) // returns 1222

a = 12.22
Math.floor(a) // expected result: 12

6. Multiply with number

Multiplying the string value with the 1 which won’t change the value and also it will be converted to number by default.

str = '2344'
console.log(str * 1) // expected result: 2344

7. Double tilde (~~) Operator

We can use the double tilde operator to convert the string to number.

str = '1234'
console.log(~~str) // expected result: 1234
negStr = '-234'
console.log(~~negStr) // expected result: -234

Here is the comparison of the ways mentioned performance wise. Comment below if you know more methods.
Thank You

5 ways to convert a number to string in JavaScript

Sanchithasr — Tue, 15 Dec 2020 10:41:54 +0000

In JavaScript, you can represent a number as type number (ex. 12), or as a type string (ex. '12').But both are not same. At times while coding we might have to convert the data from one type to other and there are many ways to do that. I would like to list few of the methods I know of data conversion from number to string.

1. Using .toString() method

There is a default string method that converts the data to string. The toString() method returns the value of a String object.

myNumber = 100
myNumber.toString() // expected result: '100'

noNumber = NaN
noNumber.toString() // expected result: 'NaN'

decNum = 122.33
decNum.toString() // expected result: "122.33"

2. Using String()

The String() method creates a primitive String type for the number that is passed to it.

myNumber = 99
String(myNumber) // expected result: '99'

fltNumber = 25.54
String(fltNumber) // expected result: '25.54'

3. Concatenating the Empty String

Adding empty string to the number value will convert the data to string is one of the simplest way to do the job. It is also considered to be faster than the above two when it comes to performance.

myNumber = 22
myString = '' + myNumber // expected result: '22'

fltNumber = 25.54
fltString = '' + fltNumber // expected result: '25.54'

4. Template Strings

With the introduction of template strings in ES6, injecting a number inside a String is a valid way of parsing an Integer or Float data type. This is the fastest way to convert the number to string.

myNumber = 22
flt = 50.205;

string = `${num}`;      // expected result: '50' 
floatString = `${flt}`; // expected result: '50.205'

5. Using toFixed() method

This is the least known method. But it can be little tricky with the decimal numbers.

myNumber = 22
myNumber.toFixed() // expected result: '22'

a = 56.9887
a.toFixed() // expected result: '57'
a.toFixed(4) // expected result: '56.9887'

Here is the comparison of the methods when it comes to the performance. Comment below if you know more ways.
Thank you

DEV Community: Sanchithasr

How to customize the viewport in the Storybook

How to Implement Storybook in React + TypeScript + Material UI application

Conclusion:

References:

6 Ways to Convert a String to an Array in JavaScript

1. Using .split(‘’):

2. Using spread syntax ([…str])

3. Using Array.from(str):

4. Using Object.assign([], str)

5. Using old school method (for loop and array.push())

6. Using Array.prototype.slice.call(‘string’)

References:

Conclusion:

What is a nullish coalescing operator (??) in JavaScript?

Syntax:

How it works?

How is it different from logical OR (||) operator?

Conclusion:

How to Communicate between Components in Vue.js

1. Using Props (Parent to Child Communication)

2. Using Events (Child to Parent Communication)

3. Using Event Bus (Communication between any components)

4. Using provide/inject (Parent to Child Communication)

5. Using this.$refs (Parent to Child Communication)

1) Using Props (Communication from parent to child )

2) Using Events (Communication from child to parent )

3) Using Event Bus (Communication between any two components)

4) Using Provide/Inject (Parent to child communication)

5) Using this.$refs (Parent to Child Communication)

Conclusion:

How to Overlay Icons on Top of Images with CSS

Step 1. Assign the Positions

Step 2. Assign z-index higher than the image to the icons if necessary

Step 3. Position the icons accordingly using the other CSS properties

Conclusion

3 ways to check if variable is a number in JavaScript

1) Using isNan()

Limitations:

2) Using typeof()

3) Using Number.isFinite()

Conclusion:

Understanding Nested Arrays in JavaScript

Creating a Nested Array:

Understanding how indices are assigned to the elements:

Flatten the nested Array:

1) Using the method Array.flat()

2) Using Array.toString() and String.split() methods

What is the Double bang (!!) operator in JavaScript?

Truthy values:

Falsy values:

3 ways to empty an Array in JavaScript

1) Using length property

2) Assigning it to a new empty array

3) Using Array method splice()

Thank you :)

7 ways to convert a String to Number in JavaScript

1. Using parseInt()

2. Using Number()

3. Using Unary Operator (+)

4. Using parseFloat()

5. Using Math.floor()

6. Multiply with number

7. Double tilde (~~) Operator

5 ways to convert a number to string in JavaScript

1. Using .toString() method

2. Using String()

3. Concatenating the Empty String

4. Template Strings

5. Using toFixed() method

5. Using old school method (`for loop` and `array.push()`)

How is it different from logical OR (`||`) operator?