DEV Community: Learner

Nullish Coalescing is not as scary as it sounds

Learner — Tue, 06 Jul 2021 13:32:07 +0000

Nullish Coalescing Operator( ?? ) is one of the features of ES2020. It gives the ability to truly check the nullish values. It is another logical operator other than OR ( || ) , AND ( && ) and NOT ( ! ) operators.

How it works?

The operator returns its Right Hand Side (RHS) operand when its Left Hand Side (LHS) operand is null or undefined, otherwise it will return the LHS operand.

Let's see how it works through some examples:

In the above example, the component Search has a prop [[searchBoxPlaceholder]].
As the prop is an optional one, so the component uses a default value when the prop is undefined. This is a best use-case of Nullish Coalescing operator because the developer doesn't wants to restrict component to always have a placeholder for the search input box. So using this an empty string can also be passed for the prop and the component will not use the default value for placeholder and would instead do not show a placeholder string, which can not be accomplished using the logical OR operator.

Below are few other examples, which will give idea about more of it's use-cases.

Comparison with other similar operators

The operator is simiar to logical OR operator and Default Assignment opertaor. If you would have noticed in the first example, then we are just assigning a default value to the prop [[searchBoxPlaceholder]], which can also be done in following way:

The above example will no doubt work, but only if the value of prop [[searchBoxPlaceholder]] is undefined. But if the value for prop is [[null]], then the default assignment will not work.

Also, the logical operator OR works in similar manner, but it works for all the falsy values. Let us see with the below example what difference comes in the evaluation for the same condition with OR operator.

Now, in the above example, the OR operator serves the purpose of assigning default value, in case the prop is any of the falsy values. But what if the user of the component doesn't wants to set any value for the placeholder. The OR operator will not allow to do this, as the empty string ( '' ) is a falsy value. So, now if we use Nullish Coalescing Operator ( ?? ). We can solve this problem and prop can accept empty string and will not show a placeholder value.

Summary

The nullish coalesing operator ( ?? ) is used to assign a default value, against the nullish values (null && undefined).
The operator has a very low prcedence in the MDN Table. It has higher precedence than Logical AND ( && ) and Logical OR ( || ).
The operator cannot be chained with && and || operators without using any explicit parentheses.

Support

Check Can I Use for the browser support.
Node JS support start from 14+ version.

That's all for the article. Thanks for reading it. Please comment your feedback and suggestions.

Twitter | LinkedIn

Optional Chaining is amazing, here's why?

Learner — Tue, 26 May 2020 17:43:39 +0000

Optional Chaining is the new javascript operator, which is included as part of EcmaScript 2020. The operator permits reading the value of a property located deep within a chain of connected objects without having to explicitly validate that each reference in the chain is valid. The operator works for validating the properties or methods in the object. They don't enable anything in terms of functionality, but they make the code a lot easy to read and write. Let's see how:

I'm sure that we all in our coding experience have faced a common problem, for which we already have a solution.

The Problem

{
    data: {
        user: {
            fullname: "Soumya Mishra"
            wishlist: ["wId_101", "wId_102"]
        }
    }
}

// Error prone-version, could throw a TypeError if any intermediate key is undefined..
const wishlistItem = db.user.wishlist.length;

Let's assume that the above object is for loggedIn user details along with user's wishlist data. Now, there can be users who have not added anything to their wishlist, so the wishlist property in the object might not be present for those users. But we have to pull the wishlist Ids from this object and make another request to fetch data.

Till date, we would choose one of the below ways to handle such scenarios.

The Solution

const wishlistIds =
    data ?
    (data.user ?
        (data.user.wishlist ?
            data.user.wishlist :
            []) :
        []) :
    [];
const wishlistItemCount = wishlistIds.length;

OR

const wishlistIds = [];
if (data && data.user && data.user.wishlist) {
    wishlistIds = data.user.wishlist;
}
const wishlistItemCount = wishlistIds.length;

This is something just for the small object, assume it for more complex object structure. Even if one writes the code correctly, it will not provide any readability.

The Magic Solution

Now we will see how we can achieve the above solution in just 1 line.

const wishlistItemCount = data?.user?.wishlist?.length;

This magic solution has been achieved through Optional Chaining (?.) Operator.

Now let's see how this Operator works if the property in the object is a Function or an array.

Optional Chaining with Dynamic Properties / Arrays

Optional Chaining works well with the dynamic properties with a different syntax. Let us see how:

// The syntax for dynamic properties or array:
?.[ ]

const userdata = {
    data : {
        user: {
            name: Ram Kumar,
            socialMediaAccounts: ['twitter', 'linkedIn'],
            primarySocialMedia: 'twitter',
            socialLinks: {
                twitter: 'https://twitter.com/mishraaSoumya',
                linkedIn: 'https://www.linkedin.com/in/mishraa-soumya/'
            }
        }
    }
}

const primarySocialMedia = data?.user?.primarySocialMedia;  // 'twitter'
// the value of primarySocialMedia can be different or dynamic property.
const socialMediaIUrl = data?.user?.socialLinks?.[primarySocialMedia]; // 'https://twitter.com/mishraaSoumya'

Let me explain the above example of how it works. So, In an app, a user can have multiple socialMediaAccounts, but there can be only 1 primary account, which can be different and dynamic. So, while pulling the URL for the primary social media account, a developer has to ensure that the dynamic value is a property in socialLinks object.

The same syntax works with the arrays also, where you are not sure if the index will always be part of the array. Check the below example:

// If the `usersArray` is `null` or `undefined`,
// then `userName` gracefully evaluates to `undefined`.
let userIndex = 13;
const userName = usersArray?.[userIndex].name;

Optional Chaining with Function Calls

Optional Chaining operator also works with Function Calls, but with an additional syntax form.

// Syntax for Function Calls
?.( )

interface InputProps = {
    value: string;
    onBlur?: Function;
    onChange: Function;
}

const inputProps: InputProps = {
    value,
    onBlur,
    onChange
}

const onBlurHandler = inputProps?.onBlur?.();

So, now you don't have to write multiple checks for your component props before actually calling the function.

Properties of Optional Chaining

The optional chaining operator has few properties: short-circuiting, stacking, and optional deletion. Let's go through these properties with an example.

Short-Circuiting: It means the if LHS of the expression evaluates to null or undefined, then the RHS is not evaluated.

a?.[++x]

In the above example, x is only incremented, if a is not null/undefined.

Stacking: It means that more than 1 optional chaining operator can be used on a sequence of property accesses. Also, you can use different forms of the operator in the same sequence.

const handler = db?.user?.[13]?.onClick?.();

So, you can combine all forms of optional chaining operator in a sequence.

Optional Delete: It means that the delete operator can be combined with an optional chain.

delete db?.user;

So, the user in the db object is only deleted if db is not null.

That's all for the article. Thanks for reading it. Please comment your feedback and suggestions.

Twitter | LinkedIn

All the ways to color your text in CSS

Learner — Mon, 11 May 2020 07:29:58 +0000

Color property in CSS is a very common one. It is used whenever there is a need to provide different colors to Text. There are many ways to provide value to this property. Let's have a look into all those ways.

1. Color Names

The simple and common way is through color names like red, green, blue, orange, etc. There are a total of 140 color names in HTML and CSS color specification.

Some of the common color names:

red, orange, blue, cyan, aqua

h1 {
    color: orange;
}

I'm Orange

I'm Red

I'm Blue

I'm Sea Green

These names are easy to remember as compared to other values for color property. All these color values represent the plain solid colors without any transparency.

2. Hexadecimal Values

The word hexadecimal refers to a numerical value that uses 16 as a base instead of 10. A hexadecimal value can have 16 values for each digit in a number:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

A hexadecimal color code is a combination of [[Red]], [[Green]], [[Blue]] & [Alpha] values. The most common format of the hex code is a 3 or 6 digit color code prefixed with #, which is followed by color codes for Red, Green and Blue [[#RRGGBB]]. The code for each of the colors is a 2 digit hexadecimal number between [[0-9]] and ([[a-f or A-F]]).

For example, these all are valid hexadecimal values:

00, 0A, 1D, 9D, F5, 99, E4, CC

The 2 digit hexadecimal number for each color is combined to create a 6 digit color value. If both the digit for each color code is the same, then the 6 digit color code can be written as a 3 digit color code.

// valid color codes

#000000 or #000
#FFFFFF or #FFF or #fff or #ffffff
#FF0000 or #ff0000
#2962ff

📌 #RRGGBBAA

We can also change the transparency of color with the hexadecimal value, just by adding the optional alpha value code [[AA]] in [[#RRGGBB]] to make it [[#RRGGBBAA]].
The AA value in #RRGGBBAA can range from the lowest value possible (00) to the highest value possible (FF). The lowest will make the colorfully transparent, which means you won’t see it anymore. The highest value will make it completely opaque, which is the default for hex codes anyway.

// color value with no alpha or fully opaque
h1 {
    color: #FF0000;
}

I am completely opaque

// semi-transparent color
h1 {
    color: #FF000080;
}

I am semi-transparent

📌 Browser Compatibility

The browser support for #RRGGBBAA hex codes is great. IE doesn’t support it but otherwise, you should be covered. Check Can I Use for details if you’re curious.

3. RGB Values

An RGB color value is specified with the [[rgb]] function which has the following syntax:

rgb (red, green, blue)

The value for each color in the function defines the intensity of the color. Each color value is an integer between [[0 and 255]] or a percentage value from [[0% to 100%]].

For example, these all are valid RGB color values

// valid rgb values

rgb (0, 0, 255)
rgb (0%, 0%, 100%)
rgb (0.5%, 3.5%, 0.5%)
rgb (89, 55, 255)

📌 RGBA

RGBA color values are an extension of RGB color values with an alpha value which provides opacity to the color similar to #RRGGBBAA. An RGBA color is specified with the [[rgba()]] function, which has the following syntax

rgba (red, green, blue, alpha)

The alpha parameter in the above function is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

// rgba value to provide full opacity
h1 {
    color: rgba (0, 0, 255, 1);
}

I am fully opaque

// rgba value with transparency
h1 {
    color: rgba (0, 0, 255, 0.3);
}

I am semi-transparent

📌 Browser Compatibility

The browser support for rgba( ) is great. Check Can I Use for details if you’re curious.

4. HSL / HSLA Values

HSL stands for hue, saturation, and lightness which is extended with an alpha value to be HSLA. It represents a cylindrical-coordinate representation of colors. This looks syntactically similar to RGB values but the ranges are different. An HSL / HSLA color value is specified with the hsl( ) / hsla( ) function, which has the following syntax:

hsl (hue, saturation, lightness)

hsla (hue, saturation, lightness, alpha)

Hue: Think of a color wheel. Around 0 and 360 degrees are reds. 120 degrees is where greens are and 240 degrees is blues. Use anything in between 0-360. Values above and below will be modulus 360.
Saturation: 0% is completely desaturated (grayscale). 100% is fully saturated (full color).
Lightness: 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
alpha: Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.

// hsl values - different shades of green

Green: hsl(120, 100%, 50%)
Light Green: hsl(120, 100%, 75%)
Pastel Green: hsl(120, 60%, 70%)

// hsla value to provide full opacity

h1 {
    color: hsla(120, 100%, 50%, 1);
}

I am fully opaque

// hsla value with 50% transparency

h1 {
    color: hsla(120, 100%, 50%, 0.5);
}

I am semi-transparent

📌 Browser Compatibility

The browser support for hsl( ) and hsla( ) is great. Check Can I Use for details if you’re curious.

No-Comma Color Functions in CSS

If you have noticed, that every single color function actually needs two functions, one for transparency and one without transparency. There is a new syntax that eliminates the need for having 2 functions. This new syntax eliminates the commas between each value in the function.

/* New Syntax */
rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

📌 Browser Compatibility

The browser support is pretty good everything except IE11. Please do check Can I Use for details.

New Color functions

The CSS Color Module Level 4 has few new color functions e.g. lab( ), lch( ) & color ( ). All these function will accept the new syntax described above.

Which One to Choose? 🤔

As there are many options to provide color values, it's a tough decision to choose the one. Based on my experience I would explain certain points for each syntax, which can help to find out the right syntax as per the use-case.

Color Names: Different browsers have their own idea for a particular named color. So, you may find differences in how a color [[aquamarine]] looks in different browsers.

Hex Codes & RGB Values: They both come under a machine-readable format, which is not easy to understand by a dev. If you want to provide a lightness or darkness to a color you cannot provide it without changing the complete color code for both formats.

HSL/HSLA Values: It is an intuitive color format that mimics the real world. I would like to explain it more with an example:

For example, you're probably sitting at a desk right now. Notice the color of the desk. Let's say its a mahogany desk. It's color values would be—

Hex: #4f2017;
RGB: rgb(79, 32, 23);
HSL: hsl(10, 55%, 20%);

Now hold your hand above it, like a couple of inches above the surface. Your hand's shadow now makes the desktop a bit darker, right? Now, it's impossible to represent this color change in hex or RGB, without changing the color itself. But in HSL, it's an absolute easy- simply decrease the Lightness value and bam! The color remains the same, but with a bit of black mixed in— basically, lessen the Lightness value.

Hex: #4f2017; --------------> #200d09;
RGB: rgb(79, 32, 23); ------> rgb(32, 13, 9);
HSL: hsl(10, 55%, 20%); ----> hsl(10, 55%, 8%);

As you can see, the values of Hex and RGB have completely changed, whereas in HSL only one aspect has changed. Because of this, it becomes intuitively easy to create color schemes on the fly.

So, my recommendation would be to use HSL a lot because getting accent colors from base color is very easy.

Where else these values can be used?

Not only with color property, these values are also used with other css properties like background-color, border-color, caret-color, text-decoration-color, outline-color, box-shadow, linear-gradient.

That’s all for now for this article. I have tried to share my knowledge, hoping to help others. Please comment your valuable suggestions and feedback.

Dev.to | Twitter

Use Case for Babel Configuration Files

Learner — Sun, 26 Jan 2020 08:14:35 +0000

One cannot imagine working on a Javascript project without babel. Whether it's NodeJs or browsers, you need babel.

Babel provides 2 ways for the configuration:

babel.config.json (there are multiple supported extension)
babelrc.json (there are multiple supported extension)

Now, the point comes which of the above files to be used as per your use case.

babel.config.json

This has been included with the babelv7.x to resolve multiple project-wide Issues. This configuration file comes into the picture when you just want to have a single configuration for the whole project. If you are using a mono-repo or you want to compile your node_modules.

This file is created at the root of your project, where package.json resides. This configuration file applies broadly to the project and even applies plugins and presets to the node modules folder.

babelrc.json

You have a configuration that only applies to a single part of your project. It allows you to create independent configurations for subsections of a package.

Also, both the config files can be used together in a case where you want to have a project-wide configuration, but also need some independent configurations.

For example, a mono-repo can have a project-wide configuration, but each of its packages can be build using a babelrc.json file.

Hope, that my learnings will help someone.

Happy Learning!