stephen-phillips-hostreviews-co-uk-2kH-6T6x_0I-unsplash.jpg_eknHAtCq0.jpg

If you're here, that means you've just installed <a title="phpMyAdmin" href="https://www.phpmyadmin.net/" target="_blank" rel="noopener">phpMyAdmin</a> in your mac system and encountered the following error
<pre class="language-javascript"><code>mysqli_real_connect(): (HY000/2002): No such file or directory</code></pre>
phpMyAdmin is one of the most popular CMS for PHP and MySQL database. But the default configuration has some issues with macOS. Let's see how it can be resolved.
<hr>
Also read: <a title="The best lightweight alternative to momentJS" href="../../blog/dayjs-the-best-lightweight-alternative-to-momentjs" target="_blank" rel="noopener">DayJS: The best lightweight alternative to momentJS</a>
<hr>
<h1 id="answer"><a href="#answer">Answer:&nbsp;</a></h1>
<h2 id="step-1-edit-the-config-file"><a href="#step-1-edit-the-config-file">Step 1: Edit the config file</a></h2>
Go to the file <code>config.sample.inc.php</code>, it is in the root of the phpMyAdmin and open it in any editor, I'm opening in VSCode.
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2021-02-12_at_11.27.23_PM_CkPf0wXxt.png?tr=n-lg" alt="Go to fine config.sample.in.php" width="100%" height="auto">
<h2 id="step-2-change-the-host-value"><a href="#step-2-change-the-host-value">Step 2: Change the host value</a></h2>
Now, in the file <code>config.sample.inc.php</code>, find the line <code>$cfg['Servers'][$i]['host'] = 'localhost';</code> and change it into&nbsp; <code>$cfg['Servers'][$i]['host'] = '127.0.0.1';</code>
The file will now look like the screenshot below.
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2021-02-12_at_11.32.16_PM_bUFGbYZha.png?tr=n-lg" alt="Chnage the host from localhost to 127.0.0.1" width="100%" height="auto">
<h2 id="step-3-rename-the-config-file"><a href="#step-3-rename-the-config-file">Step 3: Rename the config file</a></h2>
Now this is the last step, all you have to do is to remove the sample from this config file and make it <code>config.inc.php</code>
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2021-02-12_at_11.36.29_PM_ZRWJ5pJAF.png?tr=n-lg" alt="Rename the config file" width="100%" height="auto">
That's it, now you will no longer get the error. Cheers 🥂

PHPMyAdmin encounter an error in macOS "mysqli_real_connect(): (HY000/2002): No such file or directory". This is a very common error in macOS and can be resolved easily as following.

mysqli_real_connect(): (HY000/2002): No such file or directory - PhpMyAdmin in macOS

PHPMyAdmin encounter an error in macOS "mysqli_real_connect(): (HY000/2002): No such file or directory". This is a very common error in macOS and can be resolved easily as following.

timeout-waiting-for-module-invalidated.jpg_8Ov_WotSr.jpg

<a title="React Native" href="https://reactnative.dev/" target="_blank" rel="noopener">React Native</a> is one of the most popular framework for writing hybrid applications for iOS, android, windows etc. using javascript and typescript. But along with it comes a lot of pain, that consume a lot of time. Even some people leave react-native because of that in the beginning, but beauty lies ahead of all these pain.
One of the many such problems is
<blockquote>
Timeout waiting for modules to be invalidated
</blockquote>
<hr>
Also read: <a title="NextJS - from React.js to an ultra-fast experience." href="../../blog/why-nextjs-from-reactjs" target="_blank" rel="noopener">NextJS - from React.js to an ultra-fast experience.</a>
<hr>
<h1 id="answer"><a href="#answer">Answer</a></h1>
iOS in react-native supports debug over wi-fi by default. So, it is absolutely necessary to connect your MacBook and iPhone with the same wi-fi network.
So if you're getting this error, so just turn on the wi-fi in your iPhone device and connect to the same network as your MacBook, cheers 🥂 the error will go away now :)&nbsp;

Timeout waiting for modules to be invalidated - react-native ios error is a very common error one encounters. Let's see how to overcome this error in a single step.

Timeout waiting for modules to be invalidated

Timeout waiting for modules to be invalidated - react-native ios error is a very common error one encounter. Let's see how to overcome this error in a single step.

Timeout waiting for modules to be invalidated - react-native

derek-oyen-3Xd5j9-drDA-unsplash.jpg_kXsVv4i20.jpg

This article is for <a href="https://www.centos.org/about/" target="_blank" rel="noopener nofollow">CentOS</a> users, will tell you 4 different ways to display your IP address in your terminal or CLI.
<hr>
See also: <a title="NextJS - from React.js to an ultra-fast experience." href="blog/why-nextjs-from-reactjs" target="_blank" rel="noopener">NextJS - from React.js to an ultra-fast experience.</a>
<hr>
<h2 id="introduction"><a href="#introduction">Introduction</a></h2>
CentOS is one of the most reliable and stable Linux distros. It is preferred for the server OS. CentOS is the free version of <a href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux" target="_blank" rel="noopener nofollow">Red Hat Linux</a> and has features of it. It is an open-source operating system while the Red Hat is not.&nbsp;
In this article, we will see the 4 basic ways of displaying your local IP address in the terminal of CentOS. I will use the command along with the grep to trim off the unnecessary information.
<h2 id="method-1-using-the-command-ifconfig"><a href="#method-1-using-the-command-ifconfig">Method 1: Using the command ifconfig</a></h2>
Command <code>ifconfig</code> stands for interface configuration.&nbsp;It is the most commonly used command in the Linux universe. Running the command <code>ifconfig | grep 192</code> will give the result IP address. As you can see below is the local IP address 192.168.122.1
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2021-02-05_at_1.41.39_AM__TCT1Ghi6.png?tr=n-lg" alt="ifconfig command to check ip" width="100%" height="auto">
<h2 id="method-2-using-command-ip-a"><a href="#method-2-using-command-ip-a">Method 2: Using command ip a</a></h2>
That's it, ip a. This is my favorite command and I personally use this command as it has only 4 characters (3 alphabets and one is space). Using it with grep will give you the following result
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2021-02-05_at_1.48.39_AM_kb9L63SNf.png?tr=n-lg" alt="" width="100%" height="auto">
<h2 id="method-3-using-the-command-nmcli"><a href="#method-3-using-the-command-nmcli">Method 3: Using the command nmcli</a></h2>
nmcli is a command-line tool to display the different network status, so IP too. So we can use this command to get our IP as follows.
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2021-02-05_at_1.50.21_AM_B9VRpK5mI.png?tr=n-lg" alt="" width="100%" height="auto">
<h2 id="method-4-using-the-command-ip-addr"><a href="#method-4-using-the-command-ip-addr">Method 4: Using the command ip addr</a></h2>
This command is the same as <code>ip a</code>, or you can say the <code>ip a</code> is the short-hand command of <code>ip addr</code> command. So the output of this command is the same as that of <code>ip a</code>
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2021-02-05_at_1.53.37_AM_eoAB2wOyI.png?tr=n-lg" alt="" width="100%" height="auto">
&nbsp;

Using Centos? I love it too, here are 4 simple ways of displaying your machine's IP address from your terminal.

How to get the ip adress in CentOS 7

Using Centos? I love it too, here are 4 simple ways of displaying your machine's IP address from your terminal.

4 Simple ways to check IP address in CentOS 7

custom-fonts-react-native.jpg_PfFKCdVow.jpg

Add custom fonts react-native tutorial for iOS and Android.

Using custom fonts is very normal in react native because branding or font is so common that designers pick the custom ones. But adding custom fonts in react native is not as straight forward as adding in the web by just adding a script, so here's the tutorial I've written for you.

How to link your custom fonts to react-native project

cast-custom-to-primitive-type-typescript.jpg_2ImsKyNyt.jpg

<a title="typescript types" href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" rel="noopener">Types</a> are actually the soul of <a title="typeScript" href="https://www.typescriptlang.org/" target="_blank" rel="noopener">TypeScript</a>, typescript came into the game to give power to JavaScript, and that makes Typescript a success. You can read my article on <a title="why you should move from JavaScript to TypeScript" href="../../blog/why-you-must-know-typescript" target="_blank" rel="noopener">why you should move from JavaScript to TypeScript</a>. But most developers gave up as it is a bit difficult different that causes developers to lose hope at the beginning of their journey. One of the many problems that devs usually came across is assigning a type to a different type; typescript is a little strict. It has become better at auto type casting in newer versions. Still, it needs manual typecasting, which we are going to discuss here. If you don't want to dive in deeper, you can skip to the <a title="quick solution" href="#custom-type-to-primitive-type-quick-solutions">quick solution</a>. We will discuss what a <a title="primitive types" href="#primitive-types">primitive type</a> is and what is a <a title="custom types" href="#custom-types">custom type</a>, what is <a title="type casting" href="#what-is-typecasting">type casting</a>, and <a title="what is unknown type in TypeScript." href="#what-is-the-unknown-type-in-typescript">what is an unknown type in TypeScript.</a>
<hr>
Related article: <a title="nextJS from React.js to an ultra-fast experience" href="../../blog/why-nextjs-from-reactjs" target="_blank" rel="noopener">NextJS - from React.js to an ultra-fast experience</a>
<hr>
<h2 id="custom-type-to-primitive-type-quick-solution"><a href="#custom-type-to-primitive-type-quick-solution">Custom type to primitive type: Quick Solution</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/nelly-karina-lopez-BjGpLKlDKJA-unsplash_TShki-xV2.jpg?tr=n-lg" alt="custom-to-primitive-type" width="100%" height="auto">
<figcaption>Photo by <a href="https://unsplash.com/@kumoknits?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="nofollowr noopene noopener">Nelly Karina Lopez</a> on <a href="https://unsplash.com/s/photos/yarn?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener nofollow">Unsplash</a></figcaption>
</figure>
Let's take an example. There's a type called <code>Color</code>&nbsp;and there's a string variable say <code>input</code>.<code></code>
<pre class="language-typescript"><code>// Test
type Color = 'Black' | 'White' | 'Red' | 'Green' | 'Blue';

const input: string = 'Black';</code></pre>
Now suppose you want to store the input into a variable <code>phoneColor</code> of type Color, typescript won't allow it. It'll throw an error
<blockquote>
Type 'string' is not assignable to type 'Color'.ts(2322)
</blockquote>
Now here you have to cast the custom type <code>Color</code> into the primitive type <code>string</code> as follows.
<pre class="language-typescript"><code>const phoneColor: Color = input as Color;</code></pre>
That's it, is the job done? Yes and No. Yes as the job is done but no because there will be some cases where you cannot directly cast custom to a primitive type. In those cases, the typescript compiler throws an error
<blockquote>
Conversion of type <code>Color</code> to type <code>number</code> may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352)
</blockquote>
The error contains the solution to it. As it says, you have to convert the expression into <code>unknown</code> first. Casting some type to <code>unknown</code> removes its initial type and make it assignable to any other type.
<pre class="language-typescript"><code>const phoneColor: Color = input as unknown as Color;</code></pre>
You can mark it. This solution works everywhere.
<h2 id="what-are-primitive-types-and-custom-types"><a href="#what-are-primitive-types-and-custom-types">What are primitive types and custom types?</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/what-are-primitive-types-and-custom-types_46f04BzQS.jpg?tr=n-lg" alt="what-are-primitive-types-and-custom-types" width="100%" height="auto">
<figcaption>Photo by <a href="https://unsplash.com/@samdc?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener nofollow">Sam Carter</a> on <a href="https://unsplash.com/s/photos/sheep?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener nofollow">Unsplash</a></figcaption>
</figure>
Every language (not really every) specifies some inbuilt types, and all the data belongs to those types. But as the complexity grows, developers needed their own defined complex types. Language has to define a way to communicate between these custom&nbsp;types with the pre-defined types (or primitive types). Let's see what these types are and what the difference is.
<h3 id="primitive-types"><a href="#primitive-types">Primitive Types</a></h3>
&nbsp;Whenever we save some data into a variable, say we saved some number, or boolean or characters (string), language automatically defines the type from the value. They are already defined in the language specification and not created by you. These are called <a title="basic types or primitive types" href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" rel="noopener">basic types or primitive types</a>, for example.
<pre class="language-typescript"><code>const batman: string = 'Bruce Wayne';

const friday: number = 13;

const isBatman: boolean = true;</code></pre>
There are 12 basic types defined by TypeScript as per current their documentation TS version 4.0. You can read it all the <a title="12 basic types here" href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" rel="noopener">12 basic types here</a>.
<h3 id="custom-types"><a href="#custom-types">Custom Types</a></h3>
<a title="Custom types or user-defined types" href="https://www.typescriptlang.org/docs/handbook/advanced-types.html" target="_blank" rel="noopener">Custom types or user-defined types</a> are complex types made from primitive types. Suppose there's a variable to save a person's age; you can simply guess the type of the variable would be number.&nbsp;But what will be the type of variable to store the phone number of a person along with the country code, string,&nbsp;number, or what? Here comes the role of a custom type. The developer has to define a whole new type and assign a name to it.
<pre class="language-typescript"><code>interface PhoneNumber {
 countryCode: string;
 phone: string;
}</code></pre>
So, you can define a new type, say PhoneNumber, and by looking at its structure, it is clear that it can store both the information countryCode as well as the phone number of the user.
<pre class="language-typescript"><code>interface PhoneNumber {
 countryCode: string;
 phone: string;
}

const ph1:PhoneNumber = {
 countryCode: '+1',
 phone: '9876543210'
}</code></pre>
So there are scenarios where the user has to define its own custom type, made of primitive types. But there are cases where primitive types have to communicate (assign or any other operation) to the custom type. And then casting comes into play. Let's see what casting is in the next section.
<h2 id="what-is-typecasting"><a href="#what-is-typecasting">What is typecasting?</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/les-triconautes-CwUYr2zGirk-unsplash_bmktl5XSq.jpg?tr=n-lg" alt="what is typecasting in typescript" width="100%" height="auto">
<figcaption>Photo by <a href="https://unsplash.com/@triconautes?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener nofollow">Les Triconautes</a> on <a href="https://unsplash.com/s/photos/knitting?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener nofollow">Unsplash</a></figcaption>
</figure>
In simple words, we can define, typecasting is the conversion of a type into another type. That's it, it is called typecasting. But it is not as simple as it sounds. The compiler is smart many times, where it cast the types internally without any dev intervention. See the example below.
<pre class="language-typescript"><code>type Rate = 1 | 2 | 3 | 4 | 5;

const rating: Rate = 3;

const value:number = rating;</code></pre>
Even though we are assigning a <code>Rate</code> type to <code>number</code> type, the compiler knows that <code>Rate</code> is a subset of number and all the possible values of type <code>Rate</code> is assignable to a number. But the reverse is not true.
<pre class="language-typescript"><code>type Rate = 1 | 2 | 3 | 4 | 5;

const value: number = 3;

const rating: Rate = value;
 ~~~~~</code></pre>
It will throw the error Type 'number' is not assignable to type 'Rate'.ts(2322). &nbsp;
Even though 3 satisfies the <code>Rate</code> type, the type of value&nbsp;is <code>number</code>, and all the possible values of type <code>number</code> cannot be assigned to <code>Rate</code>. But still, 3 should be assignable to <code>Rate</code>. So in such cases, we have to cast the custom type to the primitive type manually as shown below.
<pre class="language-typescript"><code>const rating: Rate = value as Rate;</code></pre>
Now we have manually told the compiler, that convert (cast) the <code>number</code> type into <code>Rate</code> type so that it is assignable to the <code>Rate</code> type variable. And it will now work smoothly. But again it won't work everywhere like you cannot assign a boolean type toa string by manually casting, Compiler won't allow that, but if you still want to do it, you have to bluff the compiler by removing the type first and assigning a new type as shown below.
<pre class="language-typescript"><code>type Rate = 1 | 2 | 3 | 4 | 5;

const value: number = 3;

const rating: Rate = value as unknown as Rate;</code></pre>
This way will never fail, but it is discouraged and should only be used in worst scenarios. But what was that unknown? Let's see.
<h2 id="what-is-the-unknown-type-in-typescript"><a href="#what-is-the-unknown-type-in-typescript">What is the unknown type in typescript?</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/unknown_xpBlN8ahV.jpg?tr=n-lg" alt="unknown type typescript" width="100%" height="auto">
<figcaption>Photo by <a href="https://unsplash.com/@steve_j?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener nofollow">Steve Johnson</a> on <a href="https://unsplash.com/s/photos/yarn?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener nofollow">Unsplash</a></figcaption>
</figure>
As of now, we have seen the use of <a title="unknown" href="https://www.typescriptlang.org/docs/handbook/basic-types.html#unknown" target="_blank" rel="noopener">unknown</a> type. But haven't really defined it yet. So as its name depicts, unknown type is given to those whose type is not known and can be given any other type. In most of the places where the type is not known, typescript adds <a title="any type typescript" href="https://www.typescriptlang.org/docs/handbook/basic-types.html#any" target="_blank" rel="noopener">any</a>&nbsp;type implicitly. Both&nbsp;any&nbsp;and&nbsp;unknown&nbsp;types are similar, except any is assignable to any other type but you cannot assign unknown to other types. That's where it was needed. You have to assign some type to unknown type variable before assigning it to another type.

Typescript custom to primitive type conversion

When working with custom types in typescript, there are many scenarios where we have to cast our custom type to primitive type and vice-versa. There are many right and hacks for type conversions.

How to cast custom type into primitive type in typescript?

optional-generic-type-typescript.jpg_3gCsGTPjv.jpg

<a title="TypeScript" href="https://www.typescriptlang.org/" target="_blank" rel="noopener">TypeScript</a>&nbsp;is one of the most popular <a title="scripting languages" href="../../definitions/scripting-langauge" target="_blank" rel="noopener">scripting languages</a> and my favorite web language too, that provides great power (types) to JavaScript and makes it a strictly typed language. <a title="Generics" href="https://www.typescriptlang.org/docs/handbook/generics.html" target="_blank" rel="noopener">Generics</a> is one of my favorite features of TypeScript. Generic types are amazing to increase the flexibility of a function or class or an interface in Typescript, and I never miss a chance to use generic wherever I can. Almost every generic piece of code uses Generic Types,&nbsp; but at the same time, it also restricts the user in some way. Here in this article, I will walk you through how you can make generic types optional in TypeScript so that you can use it without forced to pass a generic type.
<hr>
Related Article: <a title="Why you should learn TypeScript and ditch JavaScript? TypeScript vs JavaScript" href="../../blog/why-you-must-know-typescript" target="_blank" rel="noopener">Why you should learn TypeScript and ditch JavaScript? TypeScript vs JavaScript</a>
<hr>
<h2 id="make-typescript-generic-type-optional-quick-solutions"><a href="#make-typescript-generic-type-optional-quick-solutions">Make typescript generic type optional: Quick Solutions</a></h2>
The way we give a default value to a parameter of a function to make it optional, the similar way we do for the generics.
To make a generic type optional, you have to assign the&nbsp;<a title="void" href="https://www.typescriptlang.org/docs/handbook/basic-types.html#void" target="_blank" rel="noopener">void</a>&nbsp;as the default value.
In the example below, even though the function takes a generic type T, still you can call this function without passing the generic type and it takes void as default.
<pre class="language-typescript"><code>function fetchData &lt;T = void&gt; ( url: string): T {
 const response:T = fetch(url);
 return response 
}</code></pre>
Now you can pass the <code>fetchData</code> either passing generic type or without it.&nbsp;
<pre class="language-typescript"><code>interface User {
 id: string;
 name: string;
}

// Function call with passing generic type, to fetch the user and return the user, whose type is passed as a generic type.
fetchData&lt;User&gt;('users/1');

// Function call without passing generic type, just to register the device, that doesn't return anything.
fetchData('register-device');</code></pre>
<h2 id="detailed-example-of-optional-generic-type"><a href="#detailed-example-of-optional-generic-type">Detailed Example of optional generic type&nbsp;</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/detailed-example_urSUoDJWQ.jpg?tr=n-lg" alt="example of optional typescript generic type" width="100%" height="auto">
<figcaption>Photo by <a href="https://unsplash.com/@candidlyrae?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Rae Goldman</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>
</figure>
Generic types can be more complicated when passing from one type to another and making optional into one and required in another. In the example below, I've created a type for a function <code>BaseFunctionType</code> and another type <code>FunctionType</code> that uses <code>BaseFunctionType</code>. In the <code>BaseFunctionType</code> are the two parameters where both are required, now we want to use that type in a function without passing the second parameter, so <code>FunctionType</code> is created to pass the second generic type as void and make it optional for the function. Now we assign the <code>FunctionType</code> to our <code>someFunction</code> and pass a single parameter.
<pre class="language-typescript"><code>type BaseFunctionType&lt;T1, T2&gt; = (a:T1, b:T2) =&gt; void;

type FunctionType&lt;T = void&gt; = BaseFunctionType&lt;{name: string}, T&gt;

const someFunction:FunctionType = (a) =&gt; {

}

someFunction({ name: "Siraj" })</code></pre>
<h2 id="method-2-with-function-overloading"><a href="#method-2-with-function-overloading">Method 2: With function overloading</a></h2>
You can also make a generic optional using two function declarations, one with a single generic and two generics. So when calling with a single generic, it will automatically pick the first declaration and not expect the second generic type. Similarly, if you pass the second generic parameter, it will pick the second function declaration. This method is not much of use, as it only works on functions mainly. See the codes below.
<pre class="language-typescript"><code>class Logger {

 // Declarations
 private logData&lt;T&gt;(operation: string, responseData: T):T
 private logData&lt;T, S&gt;(operation: string, responseData: T, requestData?: S):T

 // Definition
 private logData&lt;T, S&gt;(operation: string, responseData: T, requestData?: S) {
 // ...body
 }
}</code></pre>
If that doesn't fit your case, don't worry, the <a title="quick solution" href="#quick-solutions-make-generic-type-optional">quick solution</a> is universal and works in any case.
<h2 id="frequently-asked-questions"><a href="#frequently-asked-questions">Frequently asked questions.</a></h2>
<h3 id="what-is-type-script"><a href="#what-is-type-script">What is TypeScript?</a></h3>
TypeScript is an open-source programming language developed by Microsoft. It is the superset of JavaScript that provides types and some additional features to JavaScript. You can also call it strictly typed JavaScript.
<h3 id="should-i-use-type-script"><a href="#should-i-use-type-script">Should I use TypeScript?</a></h3>
If you use JavaScript and still wondering if you should TypeScript, then YES!!, you must give it a try. Here you can read <a title="why you should learn TypeScript over JavaScript" href="../../blog/why-you-must-know-typescript" target="_blank" rel="noopener">why you should learn TypeScript over JavaScript</a>.
<h3 id="what-are-generics-in-type-script"><a href="#what-are-generics-in-type-script">What are generics in TypeScript?</a></h3>
Generic is a feature in the language TypeScript to make the module (interface, function, etc.) more generic. But does it do it? Suppose you call a function that returns something, but the type of the return changes based on the type in the parameter, so it changes on every call to call. So it is not possible to hardcode a type in the function return type, so what would we do in that case? Use `<a title="any typescript" href="https://www.typescriptlang.org/docs/handbook/basic-types.html#any" target="_blank" rel="noopener nofollow">any</a>`? No! Giving any to the return type doesn't contain any info about the type. So the returned value from the function is always unknown, so it is not actually dependent on the type of function parameter.
<h3 id="does-react-js-use-type-script"><a href="#does-react-js-use-type-script">Does ReactJS use TypeScript?</a></h3>
ReactJS is written in JavaScript, but at the same time, it provides support for TypeScript. You can use <a title="create-react-app" href="../../definitions/cra-create-react-app" target="_blank" rel="noopener">create-react-app</a> for <a title="typescript" href="https://create-react-app.dev/docs/adding-typescript/#installation" rel="noopener nofollow">typescript</a>. Even this site is developed in TypeScript.

Optional generic types in TypeScript

The generic types are an amazing feature we get in various strictly typed like typescript. But making it optional gives developers the flexibility of using it, let's see how we can make generic types optional in typecript.

How to make generic types optional in TypeScript

dayjs-cdn.jpg_zHTI4fbPW.jpg

Dayjs CDN for free

Want Dayjs CDN for free? Here is a long list for it.

Day JS CDN for free

get-free-cdn-link.jpg_ywhZrsffn.jpg

A CDN (aka content delivery network)&nbsp;is a server specifically to serve content faster, according to the location from where it is being accessed. I will show you the best trick how you can create a CDN link for css and js in less than a minute. So let's begin 💪.
<hr>
Related Article: <a title="Why you should learn TypeScript and ditch JavaScript?" href="https://garbagevalue.com/blog/why-you-must-know-typescript" target="_blank" rel="noopener">Why you should learn TypeScript and ditch JavaScript?</a>
<hr>
<a href="https://ik.imagekit.io/garbagevalue/Full_length_infographic_2x_brQeCtDQ2.png" target="_blank" rel="noopener"><img class="no-zoom" src="https://ik.imagekit.io/garbagevalue/Full_length_infographic_2x_brQeCtDQ2.png" alt="Get free CDN Link infographic" width="100%" height="auto"></a>
<h2 id="quick-answer-get-free-css-and-js-cdn-link"><a href="#quick-answer-get-free-css-and-js-cdn-link">Quick Answer: Get free css and js CDN link</a></h2>
I'll quickly show you can get a free CDN of css and js within less than a minute. There are only 4 simple steps.
<ol>
<li>Open codepen and login or signup</li>
<li>Now create a new pen and paste your css and js code.</li>
<li>Now save it to get a unique URL.</li>
<li>Great! Now you've your CDN ready, just add .css at the end of the URL to get css CDN link and js for js CDN link.</li>
</ol>
<h2 id="what-is-a-cdn"><a href="#what-is-a-cdn">What is a CDN?</a></h2>
<figure>
<img src="https://ik.imagekit.io/garbagevalue/content-delivery-network_nbhEYs9it.jpg?tr=n-lg" alt="content delivery network" width="100%" height="auto">
<figcaption>Photo by <a href="https://unsplash.com/@nasa?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">NASA</a> on <a href="https://unsplash.com/s/photos/network?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>
</figure>
CDN also called content delivery network by some nerds, smart people call it just CDN. Now, what is the idea behind it? Suppose you're sitting in Japan, and you're browsing a website which has its server on the US. So the data has to travel all the way from the US, so to reduce this time, website owner set up another server which will serve to the Asian countries, to reduce the data travel time. Like this, a whole network is set up to serve the data according to the user's nearest location, and this network is called a content delivery network.
Now as it is not possible for every site owner to set up all this, so there are companies who have their setup all around the world, and they provide CDN services. Now suppose you want to serve your CSS to someone, and you don't have a link to share, so you just put it on a CDN, and share the URL obtained from that CDN provider.
<h2 id="detailed-step-for-cdn-link-creation"><a href="#detailed-step-for-cdn-link-creation">Detailed step for CDN link creation</a></h2>
Here are the detailed steps along with the screenshot of every step along with the link of CDNs generated at the end.
<h3 id="1-open-codepen-and-signup-login"><a href="#1-open-codepen-and-signup-login">1. Open Codepen and Signup/Login</a></h3>
Open the codepen.io and click on the login/signup.
<figure>
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2020-09-13_at_11.11.03_PM_1tTkKwNfV.png" alt="Codepen login page" width="100%" height="auto">
<figcaption>Codepen Login Page</figcaption>
</figure>
<h3 id="2-create-a-new-pen"><a href="#2-create-a-new-pen">2. Create a new pen</a></h3>
After logging in, create a new pen on clicking Pen&nbsp;on the left bar as shown below.
<figure>
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2020-09-13_at_11.16.07_PM_2EC0TIb9a.png" alt="Create a new pen" width="100%" height="auto">
<figcaption>Create a new pen</figcaption>
</figure>
<h3 id="3-add-css-and-js"><a href="#3-add-css-and-js">3. Add CSS and JS</a></h3>
Now add the css and js codes in their respective text boxes. And click save. After saving you'll get a unique URL as shown below.
<figure>
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2020-09-13_at_11.27.51_PM_gyUBCIOTQ.png" alt="saved pen" width="100%" height="auto">
<figcaption>Saved pen</figcaption>
</figure>
<h3 id="4-create-js-and-css-cdn-link"><a href="#4-create-js-and-css-cdn-link">4. Create JS and CSS CDN Link</a></h3>
Now just copy the URL and append .css or .js at the end of the URL, and boom, you now have your lifetime free CDN links of css and js respectively. CSS: <a title="css CDN Link" href="https://codepen.io/sirajalam049/pen/yLOEeyQ.css" target="_blank" rel="nofollow noopener">https://codepen.io/sirajalam049/pen/yLOEeyQ.css</a> JS: <a title="js cdn link" href="https://codepen.io/sirajalam049/pen/yLOEeyQ.js" target="_blank" rel="nofollow noopener">https://codepen.io/sirajalam049/pen/yLOEeyQ.js</a>

Create free CDN link

Many of the times we need an external css or js link to our websites. I will show you how you can create a free CDN link that will never go down nor break absolutely free.

How to create a free CDN link in less than a minute?

syntax-highlight-react.jpg_K0yjiRmXK-Y.jpg

As a technical content writer, syntax highlighting (aka code beautifying) is a must-have thing for me. Code blocks are very often in my articles. And after moving to the <a title="Next JS" href="http://nextjs.org/" target="_blank" rel="noopener">next js</a>, I had to figure out something to make the code blocks look cool, just like codes in an <a title="Integrated development environment" href="../../definitions/ide-integrated-development-environment" target="_blank" rel="noopener">IDE</a> like Visual Studio Code. So, I'll share how I figured out to show codes
from
<pre>function getFullName (user) {
 const fullName = user.firstName + user.lastName;
 return fullName;
}</pre>
to
<pre class="language-javascript"><code>function getFullName (user) {
 const fullName = user.firstName + user.lastName;
 return fullName;
}</code></pre>
<h2 id="code-highlighting-quick-solution"><a href="#code-highlighting-quick-solution">Code Highlighting - Quick Solution</a></h2>
Here I'll quickly direct you how to do syntax highlighting using Prism JS without going into many details.
<ol>
<li>
<h3 id="install-prism-js-using-npm-yarn"><a href="#install-prism-js-using-npm-yarn">Install prism js using npm / yarn</a></h3>
<code>npm i prismjs</code> or <code>yarn add prismjs</code> It also provides TypeScript support,&nbsp;<code>npm i @types/prismjs</code> or <code>yarn add @types/prismjs</code>
</li>
<li>
<h3 id="import-prismjs-into-your-blog-page-and-highlight-all"><a href="#import-prismjs-into-your-blog-page-and-highlight-all">Import prismjs into your blog page and highlight all.</a></h3>
The next step is just import prismjs into your codes and call the <code>highlightAll</code> function in your <code>useEffect</code> / <code>componentDidMount</code>.
<pre class="language-c"><code>useEffect(() =&gt; {
 if (typeof window !== 'undefined') {
 Prism.highlightAll();
 }
}, []);</code></pre>
It will automatically select the code blocks and will highlight them all. Note, you must have your codes in the following format.
<pre class="language-javascript"><code>&lt;pre class="language-javascript" &gt;
 &lt;code&gt;
 function getFullName (user) {
 const fullName = user.firstName + user.lastName;
 return fullName;
 }
 &lt;/code&gt;
&lt;/pre&gt;</code></pre>
</li>
</ol>
<h2 id="highlight-a-specific-language"><a href="#highlight-a-specific-language">Highlight a specific language</a></h2>
Every programming language has different <a title="Syntax" href="../../definitions/syntax-programming-language" target="_blank" rel="noopener">syntax</a>, so prism js need to know, that from which language is your code belongs. It is written in the class of the <a title="pre tag" href="https://www.w3schools.com/tags/tag_pre.asp" target="_blank" rel="noopener">pre tag</a>. Below is an example
<pre class="language-typescript"><code>&lt;pre class="language-java" &gt;
 &lt;code&gt;
 class HelloWorld {
 public static void main(String[] args) {
 System.out.println("Hello, World!"); 
 }
 }
 &lt;/code&gt;
&lt;/pre&gt;</code></pre>
There only <code>markup</code>, <code>css</code>, <code>clike</code> and <code>javascript</code> languages are loaded by default by prism js to process. Any language besides from them, you need to load manually as shown below.
<pre class="language-javascript"><code>import "prismjs/components/prism-java";</code></pre>
Check out the whole list of supported languages. <a title="Prism js supported languages" href="https://prismjs.com/#supported-languages" target="_blank" rel="noopener">https://prismjs.com/#supported-languages</a>
<h2 id="writing-your-own-custom-theme"><a href="#writing-your-own-custom-theme">Writing your own custom theme</a></h2>
Yes, you can write your own custom theme, which will override the default prism js theme. You can give styling to the class of each token, a global styles for all languages, language-wise styling and so on. You only need to learn the pattern of names of the classes for each kind.
<h3 id="styling-all-languages"><a href="#styling-all-languages">Styling all languages</a></h3>
<pre class="language-css"><code>pre[class*="language-"],
code[class*="language-"] {

}</code></pre>
<h3 id="language-specific-styling"><a href="#language-specific-styling">Language-specific styling</a></h3>
<pre class="language-css"><code>pre[class*="language-javascript"],
code[class*="language-javascript"] {
	color: #4ec9b0;
}</code></pre>
<h3 id="token-specific-stylings"><a href="#token-specific-stylings">Token Specific stylings</a></h3>
<pre class="language-css"><code>.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #6a9955;
}

.token.punctuation {
	color: #d4d4d4;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #b5cea8;
}</code></pre>
Following if the full list of tokens language-wise <a title="All tokens" href="https://prismjs.com/faq.html#how-do-i-know-which-tokens-i-can-style-for" target="_blank" rel="noopener">https://prismjs.com/faq.html#how-do-i-know-which-tokens-i-can-style-for</a>
<h2 id="prism-js-functioning"><a href="#prism-js-functioning">PrismJS functioning</a></h2>
<a title="Prism JS" href="https://prismjs.com/" target="_blank" rel="noopener">Prism JS</a> is a light-weight JavaScript library to tokenize your codes.
But what tokenization means?
Tokenization is dividing your code clock into categories, say in a code block, there are variables, constants, keywords, function names, and so on, and each of these categories called a token, so the whole processing is called tokenization.
Tokenization is done to give a colour to each token, like strings on your code block would be light brown, and variables would be blue-ish. The Color set for your code bock is called a theme, just like you change themes in VS Code or whatever IDE you use.
<h2 id="bonus-for-readers"><a href="#bonus-for-readers">Bonus for readers</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/bonnus-present_SI0JyEO3YO.jpg?tr=n-lg" alt="bonus of syntax highlitings" width="1000" height="668">
<figcaption>Photo by <a href="https://unsplash.com/@joannakosinska?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Joanna Kosinska</a> on <a href="https://unsplash.com/s/photos/gift?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>
</figure>
I have two bonus for all the readers. Maybe I can add some more bonuses for you with time 😉
<h3 id="add-buttons-to-code-snippet-to-feels-like-a-mac-application"><a href="#add-buttons-to-code-snippet-to-feels-like-a-mac-application">Add buttons to code snippet to feels like a mac application</a></h3>
You must've noticed that my code snippets feel like of mac window. Isn't it cool? So I am exposing my source code only for you.
<pre class="language-css"><code>.blog-post pre{
 background-color: #eff0f1;
 padding: 16px;
 border-radius: 4px;
 overflow: auto;
 font-size: 14px;
 margin-bottom: 4.1rem;
 padding: 3.7rem 0 1.6rem .4rem;
 border-radius: 12px;
 overflow: hidden;
 background-image: url(your_url_to_image.png);
 background-repeat: no-repeat;
 background-size: 44px 10px;
 background-position: 16px 14px;
}</code></pre>
I am selecting all the pre tags that are under <code>.blog-post</code> class. You can download the png from below.
<img src="https://ik.imagekit.io/garbagevalue/garbage/window-buttons_gt8xoXxWn.png" alt="Macbook window action" width="88" height="20">
<h3 id="the-second-bonus-is-the-vs-code-default-dark-theme-my-favourite"><a href="#the-second-bonus-is-the-vs-code-default-dark-theme-my-favourite">The second bonus is the VS Code Default Dark theme (my favourite)</a></h3>
Below is the CDN link for the VS Code dark default theme. You can use it directly. <a title="CDN for visual studio code default dark theme" href="https://codepen.io/sirajalam049/pen/eYZyRBO.css" target="_blank" rel="noopener">https://codepen.io/sirajalam049/pen/eYZyRBO.css</a>
Or you can further customize it on codepen <a title="Codepen " href="https://codepen.io/sirajalam049/pen/eYZyRBO" target="_blank" rel="noopener">https://codepen.io/sirajalam049/pen/eYZyRBO</a>

Syntax Highlighting in Next JS

Colorful code snippet or highlited syntaxt gives a good feel to your readers on your web article. Prism.JS is a lighweight code buitifier, see how it can be used in your next js application.

How to do syntax highlighting in Next.JS

nextjs.jpg_lGUlGzbvq.jpg

NextJS is a react framework focused on the problems faced for SEO demanding sites. Let's dive into the concept, motivation and need of next.js.

Why Nextjs after reactjs?

Are you a React developer? Next js is your next destination after react js, learn 

NextJS - from React.js to an ultra-fast experience.

typescript.jpg_xGmJrPLty.jpg

You aren't married to JavaScript, doesn't matter how much you love it, you must give it a try to TypeScript. Maybe you don't have a reason to move, but I will definitely take you on a journey, where you'd like to taste TypeScript a bit. I can give you more than 13 Reasons Why you should move to typescript, but for now, I'll try to convince you to move on to TypeScript in 5 points where I will tell you why TypeScript is much better than JavaScript for development, and why you should choose TypeScript for your next project.
<h2 id="1-strictly-typed-java-script"><a href="#1-strictly-typed-java-script">1. Strictly Typed JavaScript</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/matt-artz-lt2GzPlOAmc-unsplash_pdbx50WJg.jpg?tr=n-lg" alt="strictly-typed" width="100%" height="auto" />
Photo by <a href="https://unsplash.com/@mattartz?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Matt Artz</a> on <a href="https://unsplash.com/s/photos/forced?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
TypeScript is nothing but just a strictly typed javascript.&nbsp;One of the reasons I hate JavaScript (yes I hate it) is that there's so much flexibility on the language that there's no rules and regulation, you can write any crap, and it won't give you an error (exceptions are there), for example, if you created a variable and gave it some number as value say 6, later you can assign some function to the same variable, and can even call that variable, it seems a bit funny to me, anyway, let's see what TypeScript has to do with it.
In typescript, when you're defining a variable, you have to write its type, like the variable is going to store number, array, string, or anything else. Once you did it, you cannot store anything else in it or TypeScript won't let you proceed, and TypeScript is strict about it.
<pre class="language-typescript"><code>let age:number;
age = 25;</code></pre>
Even if you don't mention the type to the variable and assigning it some value, it is too smart, that it automatically find out the type from the value given and remembers it.
<pre class="language-typescript"><code>let age = 10;

age = "Donald Trump"
~~~
// Type '"Donald Trump"' is not assignable to type 'number'.(2322)</code></pre>
If you are aware of the languages like C/C++, there, the type is defined as&nbsp;<code>int age;</code> similarly, in TypeScript, we define type after the name of the variable following a colon sign, like this <code>let age:number;</code>. That way we just stuffed TypeScript without altering JavaScript syntax. That's what I told in the beginning, TypeScript is nothing just JavaScript, with just types. I will not focus on the syntax of typescript, it is not in the scope of this article.
Now, if it would be JS, you could do anything with the age, assing it your name, or some <code>array</code>, or even some <code>function</code>, but in TS, once it is born as <code>number</code>, it will remain <code>number</code>, nothing else. If you do it, it will give you error right away, but in JS, it will tolerate it as long as you're not doing something illegal, like calling <code>age</code> without assigning it a function or accessing <code>.length</code> property when it is a function.
At first, it might seem to you of not worth switching from JS to TS, but once you understand it completely, you never wanted to code in JS because of just this feature.
<h2 id="2-because-you-need-errors"><a href="#2-because-you-need-errors">2. Because you need errors.</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/error__67uURz4E.jpg?tr=n-lg" alt="you need error" width="100%" height="auto" />
Photo by <a href="https://unsplash.com/@rojekilian?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sarah Kilian</a> on <a href="https://unsplash.com/s/photos/error?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
When I say you need errors, doesn't mean I want you to write errorful codes, but the code you've written must be error-free, and for that, it is the job of your dev environment to give you errors. And in JS, it just doesn't do it, it is one of the reasons people love it, and at the same time hate it too. When I'm saying errors, I meant everything except syntax error. JS doesn't give an error when you write something wrong, but it gives you an error when something wrong happened. So if some part of your code isn't executed at the time of testing, then be ready for some pain in the production. :) Let's see with an example
I'm writing a code to multiply two numbers, I'll do this in both JS and TS, and you'll see how JS so unreliable and may break your application in many ways.
<pre class="language-javascript"><code>function multiply (num1, num2 ) {
 return num1 * num2;
}

console.log(multiply(3, 4));
// returns 12

console.log(multiply(3));
// return NaN

console.log(multiply(3, null));
// returns 0

console.log(multiply());
// returns NaN</code></pre>
You can literally call multiply in any manner, there's no restriction, it always gives you unexpected results, that's the worse thing about JS, suppose now you have to use that returned values somewhere, how much inconsistency and unexpected results it'll cause in your application.
But thanks to TypeScript,&nbsp;it is very strict, it won't let you proceed if you do not follow the rules if the function expects the <code>number</code>, then you must pass the number, and it says both should be numbers, then you have to pass two arguments and both must be numbers. Let's see the same code in TypeScript. If you're not aware of the TS syntax, don't worry, it is similar to JS, except return type comes before the opening brace and argument types with their names.
<pre class="language-typescript"><code>function multiply (num1:number, num2:number) :number{
 return num1 * num2;
}

console.log(multiply(3, 4));
// returns 12

console.log(multiply(3));
// ~~~~~~~~~~~
// Expected 2 arguments, but got 1.(2554)
// input.tsx(1, 33): An argument for 'num2' was not provided.

console.log(multiply(3, null));
// ~~~~
// Argument of type 'null' is not assignable to parameter of type 'number'.


console.log(multiply());
// ~~~~~~~~~~~
// Expected 2 arguments, but got 0.(2554)
// input.tsx(1, 20): An argument for 'num1' was not provided.</code></pre>
So here in TS, there are never unpredictable results, you can only proceed, when you remove all the errors, that's what makes me fall in love with TS &lt;3&nbsp;
TS is not just bound to tell the errors in your code that you've written, but it also tells you the possibility, where an error may come.&nbsp;Let's see a quick example of this.
<pre class="language-typescript"><code>// I'm writing some TS code, you can ignore it and look at the comment, I've written in the code.

// Type is user
interface User {

 // Property is name of type string
 name: string;

 // Property is age of type number
 age: number;

 // Property is social which is optional and have properties
 social?: {

 // Property is facebook which and have type string which is optional
 facebook?: string;

 // Property is twitter which and have type string which is optional
 twitter?: string;
 }
}</code></pre>
Now as you can see, the <code>social</code> property is optional means there may be cases where social is undefined, TS knows that, and it will not let you proceed until you handle it.
<pre class="language-typescript"><code>let userData:User = dataFromSomeSource;

console.log(user.social.facebook);
// ~~~~~~~~~~~
// Object is possibly 'undefined'.(2532)

if(user.social){
 console.log(user.social.facebook);
}</code></pre>
So, this is silently ignored by JS, and it causes errors case to case, which is another reason why TS is considered more reliable.
<h2 id="3-auto-tested-and-documented"><a href="#3-auto-tested-and-documented">3. Auto Tested and Documented.</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/auto-documented-and-tested_2UTyoGjtj.jpg?tr=n-lg" alt="auto tested and documented" width="100%" height="auto" />
Photo by <a href="https://unsplash.com/@jesuskiteque?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Jesus Kiteque</a> on <a href="https://unsplash.com/s/photos/tech?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Suppose you're using a function from some library written in JS, how would you know what params you've to pass? You will go to the documentation, you'll check what params it will take, which of them optional, and then you'll call the function. But in TS, there's no need to document that, everything is explained by types itself. Even it also ensure that you're using the function in the right way, and not passing any random parameters.&nbsp; For example, you can refer to the <a title="because-you-need-errors" href="#because-you-need-errors">second section above</a>.
Another case you can take is, suppose you're using a library that gives you a JS object, with nested properties, so to check what exactly the names of the properties, and which of them can be undefined, is a big pain. You have to dig in the documentation, or sometimes console log your object to see what stuff it contains. That's really what I hate, I wish some way, where the object itself tell you what properties it contains and if some property if undefined, or property has value string or number or array or what. Well, the wish is fulfilled, thanks once again to TypeScript. If the codes are written in TS, the exact behavior you'll get. Let's see with an example.
<pre class="language-typescript"><code>function getUser ( id: number ):User {
 // Some logic to get the user from id.
 let user:User = {name: "Bob", age: 24};

 return user
}

let user: User = getUser(1);</code></pre>
Now to check what properties user will have, no need to console log it, or go to the function definition when you add a <code>.</code> after <code>user</code>, it automatically gives you the list of properties it has, and also tell you which of them are undefined. See the image below.
<img src="https://ik.imagekit.io/garbagevalue/Screenshot_2020-07-19_at_3.39.14_PM_4J1C86pRbE.png" alt="auto complete examle" width="100%" height="auto" />
It also Automatically test your codes by checking all the possibilities and tell you if any of the possibility fails. Sounds amazing right, well yes, it is. This feature prevents a huge number of bugs at the time of development, you don't need to write a test for your function nor need to test it manually at different values, TS do it for you and tell you if you've missed something that may cause a problem later.
In the code below, I have written a function that takes two arguments and returns an <code>array of string</code> by adding each parameter to the array if they are not undefined. The first argument is required while the second is optional.
<pre class="language-typescript"><code>function arrayFy (name1:string, name2?: string): Array&lt;string&gt; {
// ~~~~~~~~~~~~~
// Function lacks ending return statement and return type does not include 'undefined'.(2366)

 let resultArray = [name1];

 if(name2) return resultArray.push(name2);
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Type 'number' is not assignable to type 'string[]'.(2322

}</code></pre>
The code above is a very common scenario for me to do a mistake. <a title="Array.push" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank" rel="noopener">Array.push</a> do not return the updated array, but return the new length of the array. So if the above code is written in the JS, there won't be any error, and my code just runs and gives expected results, which I have to debug and find the mistake here, and my function is returning 2 if I pass the second argument too. But here in TS, you can clearly see that TypeScript automatically run the case, and tell you that in that particular case, your function will fail to return an array of string.&nbsp;
There's another error, say if you don't pass the second parameter, you're still returning nothing (undefined), which also violates the behavior of your function as it must return an array of string. So, here I made some changes in the function and TS gives you a green flag, which means the function will never ever gives you an unexpected result. See below.
<pre class="language-typescript"><code>function arrayFy (name1:string, name2?: string): Array&lt;string&gt; {

 let resultArray = [name1];

 if(name2) {
 resultArray.push(name2);
 }

 return resultArray;

}</code></pre>
<h2 id="4-always-a-few-steps-ahead-of-java-script"><a href="#4-always-a-few-steps-ahead-of-java-script">4. Always a few steps ahead of JavaScript</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/kayvan-mazhar-BkNIBXLVuBo-unsplash_OrClkJ6iRZ.jpg?tr=n-lg" alt="typescript ahead of javascript" width="100%" height="auto" />
Photo by <a href="https://unsplash.com/@kayvanmazhar?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Kayvan Mazhar</a> on <a href="https://unsplash.com/s/photos/ahead?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Typescript is always a few steps ahead of Javascript. If a new feature is announced in JavaScript, and it is supposed to be released in next <a title="ECMA" href="../definitions/ecma">ECMA</a> release, TS release it before the official release and you can use it without any worries of compatibility in browsers as you can compile TS to any previous version of JavaScript (like ES5). TypeScript has a lot of features that JavaScript doesn't.
So we can say that TypeScript is also a superset of JavaScript, ECMA5, ECMA6, ECMA7 and ECMAnext, and some features which don't even exist in JavaScript.
<h2 id="5-conclusion-you-can-t-run-away-from-type-script"><a href="#5-conclusion-you-can-t-run-away-from-type-script">5. Conclusion: You can't run away from TypeScript</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/hiding-cat_y-tLfhnpS.jpg?tr=n-lg" alt="can't run away from the typescript" width="100%" height="auto" />
Photo by <a href="https://unsplash.com/@chrisyangchrisfilm?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Chris Yang</a> on <a href="https://unsplash.com/s/photos/hiding?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Yes, sooner or later, you have to accept TypeScript. You just can't run away from it. Every npm package either being written in JavaScript has to provide its types too, or another package with typescript support is preferred. Now, most of the large libraries, packages, and frameworks are being written in TypeScript.
In the beginning, packages used to be in JavaScript with TypeScript support too, but now the table has turned, and packages are in TypeScript and they are giving support to JavaScript. Everyone is acknowledging the power and need for TypeScript over javaScript and accepting it.
You'll never be able to learn Angular, as it forces you to write only TS code, same case with the <a title="loopback 4" href="https://loopback.io/doc/en/lb4/" target="_blank" rel="noopener">loopback 4</a>. <a title="nest js" href="https://nestjs.com/" target="_blank" rel="noopener">NestJS</a> primary language is TypeScritpt and they also provide support for JavaScript. Following is the words of NestJs
<blockquote>We're in love with TypeScript, but above all - we love Node.js. That's why Nest is compatible with both TypeScript and pure JavaScript. Nest takes advantage of the latest language features, so to use it with vanilla JavaScript we need a <a title="babel" href="../definitions/babel">Babel</a> compiler.</blockquote>
If you're still not satisfied with the reasons I gave you, and have some counter questions, you can anytime <a href="mailto:sirajalam049@gmail.com" target="_blank" rel="noopener">contact us</a>, and believe me, it is worth giving a try, you won't regret it.

It is 2020, and you still code in JavaScript? Time to move on, no matter how much you love JavaScript, TypeScript is worth ditching your love, and I will tell you why

Why you should learn TypeScript and ditch JavaScript? TypeScript vs JavaScript

github-acquired-npm.png_GdOcSwUb49.png

<a href="http://github.com/" target="_blank" rel="noopener">Microsoft Github</a> is now acquiring <a href="https://www.npmjs.com/" target="_blank" rel="noopener">npm (node package manager)</a>. It is <a href="https://github.blog/2020-03-16-npm-is-joining-github/" target="_blank" rel="noopener">officially announced on the GitHub official blog</a> by its CEO, <a href="https://github.com/nat" target="_blank" rel="noopener">Nat Friedman</a>. So in this article, I'll tell you the previous acquisition of Github by Microsoft, some fun facts about both the npm and GitHub and the few highlights of the announcement.
<h2 id="how-the-git-hub-and-npm-are-the-two-most-popular-platforms-in-the-open-source-world"><a href="#how-the-git-hub-and-npm-are-the-two-most-popular-platforms-in-the-open-source-world">How the GitHub and npm are the two most popular platforms in the OpenSource world?</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/yancy-min-842ofHC6MaI-unsplash_6D9pwvDZp.jpg?tr=n-lg" alt="github" width="100%" height="auto">
<span style="color: #000000; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">Photo by&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #000000; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/@yancymin?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Yancy Min</a><span style="font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">&nbsp;on&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #000000; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/s/photos/github?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
GitHub is the world's most popular platform providing git features.&nbsp; GitHub founded in 2008, and it is written in <a href="https://github.com/" target="_blank" rel="noopener">their home page</a> "More than 2.1 million businesses and organizations use GitHub" which includes most of the large open-source projects like VSCode, AngularJS, ReactJS, VueJS. Later GitHub announced to let users create private repositories with three collaborators asides from the owner to the non-premium users causes increased in new code-bases, that was previously for premium users. Everyone was expecting a lot more from the GitHub. Then GitHub released its <a href="https://github.com/mobile" target="_blank" rel="noopener">new mobile app (iOS and android)</a>, to let the user do basic things, like merge the PR, code reviews, tracking the issues etc. And later comes this news.
<img src="https://ik.imagekit.io/garbagevalue/paul-esch-laurent-oZMUrWFHOB4-unsplash_8FPkGVbTb.jpg?tr=n-lg" alt="npm" width="100%" height="auto">
<span style="font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">Photo by&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #000000; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/@pinjasaur?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Paul Esch-Laurent</a><span style="font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">&nbsp;on&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #767676; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/s/photos/npm?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
npm is the default package manager of nodeJS. You can manage your packages here, and distribute with the world or make it private to you or your firm. It is in the market for ten years, and have become the mainstream for javascript packages distribution platform. There would hardly be any JavaScript developer who hasn't used npm. Nat Friedman, the CEO of the Microsoft GitHub said in his <a href="https://github.blog/2020-03-16-npm-is-joining-github/" target="_blank" rel="noopener">npm acquisition announcement blog</a>, "The work of the npm team over the last ten years, and the contributions of hundreds of thousands of open source developers and maintainers, have made npm home to over 1.3 million packages with 75 billion downloads a month."&nbsp;
<h2 id="microsoft-steps-into-the-open-source-world"><a href="#microsoft-steps-into-the-open-source-world">Microsoft steps into the Open Source world</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/johny-vino-R54V69BN0MI-unsplash_VhgoYQq9s.jpg?tr=n-lg" alt="" width="100%" height="auto">
<span style="font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">Photo by&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #34495e; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/@johnyvino?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Johny vino</a><span style="font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">&nbsp;on&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #767676; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/s/photos/microsoft?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Two years from now, in 2018, Microsoft acquired over the GitHub in $7.5 billion. This step was highly appreciated as well as criticized by the community. Some was expecting that more features would become paid while some was expecting the opposite, but as I told above, later they even made some paid features (creating private repositories) free. Visual studio code is one of the most popular IDEs in the market. It has recorded as the <a href="https://octoverse.github.com/#top-and-trending-projects" target="_blank" rel="noopener">most contribution last year made was in this project</a>, which is another significant achievement of Microsoft in the OpenSource community. With this step too, many critics of Microsoft from the OpenSource family appreciated Microsoft.
<h2 id="the-big-announcement-from-the-ceo-nat-friedman"><a href="#the-big-announcement-from-the-ceo-nat-friedman">The Big Announcement from the CEO, Nat Friedman</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/the-announcement_CagMQlxjv.jpg?tr=n-lg" alt="the-announcement" width="100%" height="auto">
<span style="font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">Photo by&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #34495e; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/@matwag?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Matthias Wagner</a><span style="font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">&nbsp;on&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #767676; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/s/photos/conference?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
On Monday, 16th March 2020, Nat shared a blog on <a href="https://github.blog" target="_blank" rel="noopener">github.blog</a>, "I'm excited to announce that GitHub has signed an agreement to acquire npm." That was a game-changer announcement. JavaScript is the most used language contributed in the projects on GitHub that made it the hub have the majority of JavaScript developers. So acquiring npm by GitHub is an excellent gift to all the JavaScript developers around the world, contributing in the OpenSource projects. He added, "We at GitHub are honoured to be part of the next chapter of npm's story and to help npm continue to scale to meet the needs of the fast-growing JavaScript community." Everyone looking for the plans of npm with GitHub, let's see, what are some key points mentioned by Nat.
<h2 id="future-plans-for-npm-and-git-hub"><a href="#future-plans-for-npm-and-git-hub">Future Plans for npm and GitHub</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/future-plans-of-github-and-npm_M0WV9JaL8.jpg?tr=n-lg" alt="Future plans of GitHub and npm" width="100%" height="auto">
Nat said that npm will always remain free for the users. Besides and most exciting and expected thing of this deal is, that npm is going to be integrated with the GitHub, that may bring lots of new features. Aside from that, he added three bullet points.
<ul>
<li>Invest in the registry infrastructure and platform:&nbsp;As the npm is growing with the team, the resources are also needed to be upgraded and require investment. It will become faster and scalable.</li>
<li>Improve the core experience: We are going to have a lot of new features, reliable and other things. One of the popular is <a href="https://github.com/npm/rfcs/blob/de8d71c0453f5cf443d3ef2f47e313f12dd6aaf9/accepted/0000-workspaces.md" target="_blank" rel="noopener">workspaces</a>, which is requested by the community for a long time. Let's see what else exciting stuff we'll get into the menu.</li>
<li>Engage with the community:&nbsp;Now as the npm is Microsoft backed, we can expect things will be in pace, better response from the community and rapid feature requests implementations.</li>
</ul>
Well, the amount of the deal is not disclosed from any party, but at the end of the day, we JavaScript developers will have to a lot of things.

The acquisition of the npm by Microsoft Github. npm is the default package manager for nodeJS, while GitHub which is already acquired by Microsoft is a platform that provides git services.

Microsoft GitHub has now acquired the npm; Most popular Javascript package manager

google-lite.jpg_pOfkZ1Vis.jpg

Google released its built-in optimization feature named Data Saver officially in January 2014. It renamed the feature to “Lite Mode” and kept it for Android devices only since March 2019. The feature is meant to reduce the data usage on your mobile device by loading web pages which are compressed by the Google servers.
As the Data Saver feature is deprecated, let's talk about the Lite Mode which is Android-only and not available on the desktop version of Chrome.
<h2 id="the-feature"><a href="#the-feature">The Feature</a></h2>
Aiming to reduce the network data usage, Google initially launched it as an extension to Chrome desktop, and later removed it. The feature also gives an option to see how much data was saved using Lite mode. Below is the screenshot of a phone which used 1.01 GB of data in a week and saved 209 MB of data which is around 20% of savings. It also shows what websites were visited and the data saved on browsing.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://ik.imagekit.io/garbagevalue/google-lite-mode_Els3vvs5u.jpg" alt="Google Lite Feature" width="500" height="982">
This feature uses the standard Transparent Proxy to see the URL requests, forward the requests to the servers on behalf of the client, download the webpage to its servers, compress it and sends the data back to the user which is of lesser size than the original one. We have tried to differentiate between the regular browsing and Lite Mode browsing with the below diagram.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://ik.imagekit.io/garbagevalue/Normal_Bropwsing_k0Hvqjw5K.png" alt="Normal Browsing" width="100%" height="auto">
<img src="https://ik.imagekit.io/garbagevalue/Lite_Mode_Browsing_with_Chrome_jR7uwY7ohC.png" alt="Lite Mode Browsing with Chrome" width="100%" height="auto">
In times of mobile network, where 4G internet data is highly chargeable, this is an efficient feature that reduces data usage with a significant margin without making a compromise with the quality of information or time taken to load the webpage. However, does it all come at the cost of privacy?
<h2 id="privacy-and-security"><a href="#privacy-and-security">Privacy and Security</a></h2>
Let's start with the very beginning of Google Chrome set up on your phone.
The second option gives you the option to disable Lite Mode. You're right, it is enabled by default. This is the first step where you can know if there is such a feature in Chrome and understand how it works. A conscious user will go through all the details of the feature and then choose to enable or disable this feature.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://ik.imagekit.io/garbagevalue/Browse_fast_with_less_data_q_IK_EnqN.jpg" alt="Browse fast with less data" width="500" height="972">
The good thing is Google shows you if a website is loaded with "Lite Mode" you'll see the flash icon beside your browser address bar.
The first major privacy challenge is that Google collects the URLs you're using, although passing through its web servers, its servers can also see and download the content you're browsing. According to Google Chrome Whitepaper, Chrome doesn't send the user input information such as cookies or personal data.
<a href="https://www.google.com/chrome/privacy/whitepaper.html#datacompression">https://www.google.com/chrome/privacy/whitepaper.html#datacompression</a>
The second major security challenge arrives with the use of HTTPS websites which are supposed to be TLS encrypted connections with the destination servers. If you're accessing SSL secured websites such as Facebook or Twitter, how does “Lite-Mode” handle that?
<h2 id="the-curse-of-ssl-proxy"><a href="#the-curse-of-ssl-proxy">The curse of SSL Proxy</a></h2>
The transparent proxy servers are the epitome of end-user helplessness, as there is no way you can control if you want to be intercepted by the Network owners or not. The intercepting devices are sitting on the pathway between your device and the internet/webserver. When using an SSL session, the only thing visible is the website domain of the webserver you're accessing. For example, you may be browsing groups, uploading pics, and status, etc on your Facebook, but a network sniffer can only see that you have an encrypted channel with facebook.com. So, in order for Lite Mode to work, it needs to decrypt that channel. How does it do that? Like every other SSL Proxy:
An SSL proxy catches every packet from the beginning and relays the information with the webserver, and ultimately creates the same symmetric-key which is used by both parties to decrypt/encrypt the web traffic. This is achieved by the Chrome Proxy servers to pose as the actual web servers and generating a pseudo-certificate with the domain of the intended web server. This is well explained by network giant Juniper documentation - <a href="https://www.juniper.net/documentation/en_US/junos/topics/topic-map/security-ssl-proxy.html#ssl-proxy-graphic">https://www.juniper.net/documentation/en_US/junos/topics/topic-map/security-ssl-proxy.html#ssl-proxy-graphic</a>
So, an SSL proxy server sees all the communication between the client and web server which is supposed to be encrypted and not to be seen by a third party. An SSL Proxy server is generally used by restricted campuses, or where the user intentionally configures an explicit proxy to be used in order to achieve anonymity with the webserver.
The HTTPs websites' cached pages are served by Google with its own domain means that you're not visiting the websites intended, but the Google web server which downloaded and page and served to you. This raises the question of conscious of the information you're being served by Google Lite Mode proxy.
Google claims that the information provided through Lite Mode pages are not changed while serving the web pages. However, does the actual website owner agree with this clause? Is it agreed with the webserver that their pages are cached on Google servers for 14 days and are served to the end-users? Do they still hold the ownership and accountability of the data being served by Lite servers?
So far, we have not read or heard the owners of the website providing a clause or agreement related to their web pages being served by Google. In case of a variety of information in such cases, who can behold accountably? Google who is actually sending that information, or the webserver from where the information was originated?
Despite Google's intention and claims, the problem resides in the default turned-on feature and their ability to peek through all the data if Lite Mode is enabled.
Please do write us back if you have more information about this topic or would like to correct mistakes. We're always open to suggestions and corrections to keep the best of information to the users.
Write to us at <a href="mailto:sirajalam049@gmail.com">sirajalam049@gmail.com</a>

An overview of Privacy and Security concerns of Lite Mode

An overview of Privacy and Security concerns of the Google Lite Mode

Google Lite: The Unwanted Proxy

react-redux-hooks-with-typescript.jpg_cXMvpJ6Gu7.jpg

It's been more than a year when <a title="React" href="https://reactjs.org/" target="_blank" rel="noopener">React</a> introduced <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank" rel="noopener">hooks</a>. Many popular libraries that used with ReactJS like <a title="React Router" href="https://reacttraining.com/react-router/web/" target="_blank" rel="noopener">React-Router</a>, <a title="React Redux" href="https://react-redux.js.org/" target="_blank" rel="noopener">React-Redux</a>, <a title="Material UI" href="https://material-ui.com/" target="_blank" rel="noopener">Material UI</a>, etc. now support hooks and functional components. But today in this article, I will show you the new way of accessing store and dispatch in your functional component without using <a title="higher order components" href="https://reactjs.org/docs/higher-order-components.html#___gatsby" target="_blank" rel="noopener">higher-order components</a>, and compare how hooks reduced huge pile of <a title="boilerplate" href="../../definitions/boilerplate">boilerplate</a>.
<hr>
Related Article: <a title="Latest Features of Typescript 2020 release" href="../../blog/latest-features-of-typescript-3-8-2020-release" target="_blank" rel="noopener">Latest Features of Typescript 2020 release</a>
<hr>
<h2 id="1-what-are-hooks-in-react-js"><a href="#1-what-are-hooks-in-react-js">1. What are hooks in ReactJS?</a></h2>
<img src="https://ik.imagekit.io/garbagevalue/what-are-react-hooks_ATUe2od3Z.jpg?tr=n-lg" alt="What are react hooks?" width="100%" height="auto">
<span style="color: #111111; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">Photo by&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #767676; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/@chuttersnap?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">chuttersnap</a><span style="color: #111111; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">&nbsp;on&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #767676; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/s/photos/hook?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
If you're aware of what are hooks in react, you can skip to the <a href="#react-redux-hooks-class-vs-functional-component-comparison">next section.&nbsp;</a>
React hook is a new concept introduced in <a title="React 16.8" href="https://reactjs.org/blog/2019/02/06/react-v16.8.0.html" target="_blank" rel="noopener">React 16.8</a>, that enables programmers the power to separate the logic from the UI. We all know that states used only in react component, so what if there's a logic bind with that state, and you want to use it in multiple files? You forced to return a JSX, which makes it a functional component. Now, that was the motivation.
So now, you can write a functional component hook, you can do everything that you do in a functional component except you can return anything rather than just a JSX. Hooks name start with use like&nbsp;<code>useEffect</code>, <code>useState</code> etc. It is not a strict rule, but it considered a standard to identify hooks.
<h2 id="2-react-redux-hooks-class-vs-functional-component-comparison"><a href="#2-react-redux-hooks-class-vs-functional-component-comparison">2. React redux hooks: Class vs Functional component comparison</a></h2>
(See the complete code on <a title="Code Sandbox" href="https://codesandbox.io/s/hooks-with-react-redux-example-using-with-typescript-to-reduce-the-react-boilerplate-3lu3b)" target="_blank" rel="noopener">Code Sandbox</a>
I'm writing a simple class component and a functional component that render the name of a user. First, we dispatch the name of the user, and next, we select the name from the store in the component to display it in the component.
<pre class="language-typescript"><code>import * as React from "react";
import { connect } from "react-redux";
import { TReduxStore, TDispatch } from "./types";
import { AxiosPromise } from "axios";
import { getUser } from "./action";

type IStateProps = Pick&lt;TReduxStore, "user"&gt;;

interface IDispatchProps {
 getUser: (id: string) =&gt; AxiosPromise;
}

interface IProps extends IStateProps, IDispatchProps {}

class ShowUser extends React.Component&lt;IProps&gt; {
 componentDidMount() {
 this.props.getUser("1");
 }

 render() {
 const { user } = this.props;
 return !user ? "Loading..." : &lt;div&gt;User Name: {user.name}&lt;/div&gt;;
 }
}

const mapStateToProps = (state: TReduxStore): IStateProps =&gt; ({
 user: state.user
});

const mapDispatchToProps = (dispatch: TDispatch): IDispatchProps =&gt; ({
 getUser: id =&gt; dispatch(getUser(id))
});

export default connect(
 mapStateToProps,
 mapDispatchToProps
)(ShowUser);
</code></pre>
Above is the <a href="https://react-redux.js.org/api/connect" target="_blank" rel="noopener">traditional way of connecting your ReactJS component with the redux</a>. You have to write that much code just to request and display the user name. Now let's see the same thing in the functional component.
<pre class="language-typescript"><code>import * as React from "react";
import { useSelector, useDispatch } from "react-redux";
import { TReduxStore, TDispatch } from "./types";
import { getUser } from "./action";

type IStateProps = Pick&lt;TReduxStore, "user"&gt;;

const ShowUser: React.FC = props =&gt; {
 const dispatch = useDispatch&lt;TDispatch&gt;();

 const { user } = useSelector&lt;TReduxStore, IStateProps&gt;(state =&gt; ({
 user: state.user
 }));

 React.useEffect(() =&gt; {
 dispatch(getUser("1"));
 }, [dispatch]);

 return !user ? &lt;div&gt;"Loading..."&lt;/div&gt; : &lt;div&gt;User Name: {user.name}&lt;/div&gt;;
};

export default ShowUser;
</code></pre>
As you can see, using hooks, reduced the number of lines to almost half. I'm considering you're using the class component, so I'm not explaining that snippet. So I'm just explaining the FunctionalComponent.tsx below.
<h2 id="3-how-to-use-use-dispatch-and-use-selector-react-redux-hooks-in-your-functional-component"><a href="#3-how-to-use-use-dispatch-and-use-selector-react-redux-hooks-in-your-functional-component">3. How to use useDispatch and useSelector react-redux hooks in your functional component?</a></h2>
Let's see one by one how to use the <a title="use of useDispatch hook" href="https://react-redux.js.org/api/hooks#usedispatch" target="_blank" rel="noopener">useDispatch</a> and the <a title="use of useSelector hook" href="https://react-redux.js.org/api/hooks#useselector-examples" target="_blank" rel="noopener">useSelector</a> to dispatch and select the data from the redux store.
<img src="https://ik.imagekit.io/garbagevalue/use-dispatch-and-use-selector_ng2RpmM1L.jpg?tr=n-lg" alt="How to use useDispatch and useSelector in react redux typescript" width="100%" height="auto">
<span style="color: #111111; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">Photo by&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #767676; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/@chris_j_scott?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Chris Scott</a><span style="color: #111111; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap; background-color: #f5f5f5;">&nbsp;on&nbsp;<a style="box-sizing: border-box; background-color: #f5f5f5; color: #767676; transition: color 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s; text-decoration-skip-ink: auto; font-family: -apple-system, system-ui, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: nowrap;" href="https://unsplash.com/s/photos/hook?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
<ul>
<li>
<h3 id="use-dispatch"><a href="#use-dispatch">useDispatch</a></h3>
useDispatch hook used to get the redux dispatch function in your functional component or hook. It takes a <a title="generic type" href="https://www.typescriptlang.org/docs/handbook/generics.html" target="_blank" rel="noopener">generic type</a> of data dispatch, takes in its parameters. Usually, it is <code>{type: string, payload?: any}</code> but as I'm redux-thunk here, so its type is <code>ThunkDispatch&lt;TReduxStore, {}, TAction&gt;;</code> where <code>TReduxStore</code> is the type of the store and <code>TAction</code> is <code>{type: string, payload?: any}</code>.
</li>
<li>
<h3 id="use-selector"><a href="#use-selector">useSelector</a></h3>
As its name suggests, it gives you the functionality of selecting the data from your redux store. It takes one parameter, which is a callback, where it passes the whole redux state, and you return the data you want to select from it. So the callback function looks like below.
<pre class="language-typescript"><code>function (state) {
 return ({
 user: state.user
 })
}</code></pre>
The same thing I have written is in the flat arrow function format in the functional component. It takes two types in its <a title="generic type" href="https://www.typescriptlang.org/docs/handbook/generics.html" target="_blank" rel="noopener">generic type</a>. One is the type of your redux store, and the second is the type you want to select from the store. IN my codes, it is represented by <code>TReduxStore</code> and <code>IStateProps</code> respectively.
</li>
</ul>

Let's read how you can use hooks provided by react-redux to reduce the boiler plate of your codes and how to use useDispatch and useSelector.

React Redux hooks in Typescript

Use react hooks with react-redux in typescript

Typescript_3.8_Latest_Features_2020.jpg_scREnHH2z.jpg

It is Feb 2020, and a few days back TypeScript released it's 3.8 version which you can <a title="Download TypeScript 3.8" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html" target="_blank" rel="noopener">download now</a>, till now it was on beta. I was reading their <a title="3.8 Release Notes" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html" target="_blank" rel="noopener">release Notes</a> and thought on sharing with you guys descriptively with different use cases.
I'll explain the top 5 TypeScript 3.8 features mentioned in the Feb 2020 release notes one by one with examples. So let's begin
&nbsp;
<h2 id="1-type-only-imports-and-exports"><a href="#1-type-only-imports-and-exports">1. Type-Only Imports and Exports</a></h2>
A new <code>import-export</code> syntax introduced where users can import and export only types.
<pre class="language-typescript"><code>import type { SomeType } from "somefile";

export type {SomeType}</code></pre>
<code>import type</code> import only types and declaration similarly <code>export type</code> only export types and declaration. Now it seems a little of no use, as we can simply import types using <a title="ECMAScript" href="../definitions/ecma">ECMAScript</a> <code>import</code> statement when a type-specific import statement? So the answer is, when you write an import statement, it loaded that module, but when importing only types or declaration, we don't want the module to be loaded as those types are only required before compilation and absolutely useless at runtime.
So type-only imports and exports are added, keeping in mind the above scenario, so they always get fully erased at run time and won't load unnecessary modules. But in case you don't want this behavior, then you can change it using <code>importsNotUsedAsValues</code> <a title="compiler option" href="https://www.typescriptlang.org/docs/handbook/compiler-options.html" target="_blank" rel="noopener">compiler option</a>.
You have to be careful when importing some class as a type because in that case, it won't be used as the value. See the example below
<pre class="language-typescript"><code>import type { Component } from "react";

interface FooComponentProps {
 // ...
}

class FooComponent extends Component&lt;FooComponentProps&gt; {
// ~~~~~~~~~
 // error! 'Component' only refers to a type, but is being used as a value here.

 // ...
}</code></pre>
Here <a title="Component" href="https://reactjs.org/docs/glossary.html#components" target="_blank" rel="noopener">Component</a> is being imported as a type but being used as a value, that causes an error. So you have to use the ECMAScript import statement.
<h2 id="2-ecma-script-private-fields"><a href="#2-ecma-script-private-fields">2. ECMAScript Private Fields</a></h2>
If you're aware of&nbsp;<a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" href="https://github.com/tc39/proposal-class-fields/#private-fields" target="_blank" rel="noopener">class private fields</a> in ECMAScript 2019, so they were not yet supported in the TS version &lt; 3.7. But in this release, private fields are also supported. You can read <a href="https://stackoverflow.com/questions/59641564/what-are-the-differences-between-the-private-keyword-and-private-fields-in-types" target="_blank" rel="noopener">the difference between keyword and private fields</a>. A simple example of it below.
<pre class="language-typescript"><code>class MyClass {
 #privateData: string;

 constructor(someValue: string) {
 this.#privateData = someValue;
 }
}

const MyClassObj = new MyClass('TypeScript');

MyClassObj.#privateData;
// ~~~~~~~~~~~~
// Property '#privateData' is not accessible outside class 'MyClass' because it has a private identifier.(18013)</code></pre>
<h2 id="3-export-as-something-syntax"><a href="#3-export-as-something-syntax">3. export * as something Syntax</a></h2>
Whenever we have to import all the exported members of a module, we use the following syntax
<pre class="language-typescript"><code>import * as React from "react";</code></pre>
but this wasn't possible on the export side, till TS 3.7. So a workaround of it was.
<pre class="language-typescript"><code>import * as React from "react";

export { React };</code></pre>
But now typescript supports it as <a href="../definitions/ecma">ECMA</a> added this specification in ECMAScript 2020. See Example below.
<pre class="language-typescript"><code>export * as React from "react";</code></pre>
<h2 id="4-top-level-await"><a href="#4-top-level-await">4. Top-Level await</a></h2>
If you're aware of <a title="Async-Await" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-7.html" target="_blank" rel="noopener">async-await</a>, then you know that to use the await keyword, we use the async keyword.
<pre class="language-typescript"><code>async function showNames() {
 const names = await fetchNames().catch(error =&gt; { throw error });
 console.log({names});
}</code></pre>
So it wasn't possible to use await in the top-level (outside any function), it is also now supported by TS 3.8 and in upcoming ECMAScript. But it can only be used inside a <a href="https://www.typescriptlang.org/docs/handbook/modules.html" target="_blank" rel="noopener">module</a>, so if your file is not a module you can <a href="https://stackoverflow.com/questions/56577201/why-is-isolatedmodules-error-fixed-by-any-import/56577324" target="_blank" rel="noopener">write&nbsp;<code>export { }</code> to make it a module and pass the <code>isolatedModules</code> compile check</a>. An example is below:
<pre class="language-typescript"><code>const names = await fetchNames();
console.log({names})</code></pre>
You also have to set the target compiler option is <code>es2017</code> or above, and the module is <code>esnext</code> or system.&nbsp;
<h2 id="5-js-docs-property-modifiers"><a href="#5-js-docs-property-modifiers">5. JSDocs Property Modifiers</a></h2>
This release allows you to use JavaScript files (<a href="https://www.typescriptlang.org/docs/handbook/compiler-options.html#compiler-options" target="_blank" rel="noopener">allowJs flag</a>) with type-checks. For that, it is using <a href="https://jsdoc.app/" target="_blank" rel="noopener">JSDocs</a>, tags which allow some flags and tags in the comment just above the code line. For example, below is a JS file code.
<pre class="language-javascript"><code>// @ts-check

class Foo {
 constructor() {
 /** @private */
 this.stuff = 100;
 }

 printStuff() {
 console.log(this.stuff);
 }
}

new Foo().stuff;
// ~~~~~
// error! Property 'stuff' is private and only accessible within class 'Foo'.</code></pre>
So, here even this is a JS file, we can allow TS to compile it based on the JSDocs tags.
For now, only a few JSDocs tags are supported which are <code>@public</code>, <code>@private</code>, <code>@protected</code> and <code>@readonly</code>. This is very useful when you start to code in some old JS projects and miss the TS environment.
Thanks for reading this article, if you find any missing information or misinformation, please let know to correct it at <a href="mailto:mailto(sirajalam049@gmail.com)" target="_blank" rel="noopener">sirajalam049@gmail.com</a>

Latest Typescript 3.8 release of Feb 2020 key features with examples and code snippets.

New Typescript 3.8 release of Feb 2020 key features with examples and code snippets.

Latest Features of Typescript 3.8 2020 release

moment-bs-day-js-react.jpg_wz-7x1RZs.jpg

If you're reading this article, it means you've come out of a phase where you've started to look at the size of the package instead of installing it just because it is popular and do your job. In this article, I will compare <a title="momentjs" href="https://momentjs.com/" target="_blank" rel="noopener">momentjs</a> vs <a title="dayjs" href="https://day.js.org/" target="_blank" rel="noopener">dayjs</a> in many aspects. And tell you how and when dayjs is better and when momentjs.
A few days back I was optimizing the size of one of my old react projects, I saw moment import which I don't use nowadays, so I decided to write an article on this showing why you should consider dayjs shouldn't use momentjs just because you want to show date as 9 March, 20 instead of 09/03/2020.
<h2 id="why-momentjs-first-of-all-master-of-time" style="text-align: left;"><a href="#why-momentjs-first-of-all-master-of-time">&nbsp;Why momentjs first of all? - Master of Time </a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/tr:n-blog_in_content/maxresdefault_9icg3BAX4M.jpg" alt="" width="100%" height=""></figure>
MomentJS is one of the most popular and oldest date-related libraries. It has around <a title="momentjs github" href="https://github.com/moment/moment/" target="_blank" rel="noopener">43k GitHub stars</a> and is being used by around 1.3m GitHub repositories. It is most popular because of its rich and simple APIs for <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank" rel="noopener">date and time formatting and manipulation</a> and multi-platform compatibility and if anyone needs date/time formatting or manipulation, momentjs come first in mind. Maybe that is one of the reasons why everyone prefers momentjs in the first place, even in my company, they prefer momentjs as there's no alternative with such sweet APIs exist, and even exist it may not be popular as much as momentjs. So no one dares to think anything beyond momentjs. But there are reasons when one has to consider and look beyond. In the next section, let's see why momentjs became the point of debate and how the need for some alternative felt.
<h2 id="why-one-shouldn-t-use-moment-js-then"><a href="#why-one-shouldn-t-use-moment-js-then">Why one shouldn't use momentJS then?</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/time_H-6WZ3TzdZ.jpg?tr=n-lg" alt="momentjs" width="100%" height="auto">
<figcaption>Photo by <a href="https://unsplash.com/@sonnnchen?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sonja Punz</a> on<a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>
</figure>
It's a trade-off, with such great features comes great cost.
I'm using <a title="VSCode Import Cost" href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost" target="_blank" rel="noopener">VSCode Import Cost</a> extension to check the import cost of each library, and it is showing 136 KBs, which is the most expensive library I'm using right now, much more than <a title="MaterialUI" href="https://material-ui.com/" target="_blank" rel="noopener">MaterialUI</a> that costs me 80 kBs. While the material-UI is the most used package. In every jsx/tsx file, you'll see at least one import from marterial-UI. So the question is, is it worth it? Is it doing that much work that I pay more than 130 kBs? Like some applications only needs to format the date while some application shows the time with respect to the current time, like showing the timing of some events, is it being tomorrow, today or is past, some bar is closed or when closing, etc. And some cases may also involve the timezone, which is a headache on its own. The answer depends on application to application, and mostly we format the date, and a bit less frequently we do date manipulation. 
So for only these work, &gt; 130 kBs is not a good deal, especially when your application is SEO demanding, everyone (me too) want to load the application faster, I have applied many tactics to do, and while optimizing the package size of my application, 130+ kBs caught my eyes. This has to be fixed.
<h2 id="if-not-moment-js-then-what-alternative"><a href="#if-not-moment-js-then-what-alternative">If not momentJS then what alternative?</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/tr:n-in_blog_content/day-js_DIIhkzReR2.png" alt="Day-JS-Github-Cover" width="100%" height="auto">
<figcaption>Image Credit:<a href="https://github.com/iamkun/dayjs" target="_blank" rel="noopener">DayJS GitHub</a></figcaption>
</figure>
I came to know about a library that mainly focused to tackle exactly the same issue that I mentioned above, named <a title="Day JS" href="https://day.js.org/" target="_blank" rel="noopener">DayJS</a>. The first two lines on their official documentation are
<blockquote>DayJS 2kB JavaScript date utility library</blockquote>
They say,
<blockquote>Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.</blockquote>
<a title="https://github.com/iamkun/dayjs" href="https://github.com/iamkun/dayjs" target="_blank" rel="noopener">DayJS</a> becoming popular with 25.6k GitHub stars surpassing <a title="https://github.com/date-fns/date-fns" href="https://github.com/date-fns/date-fns" target="_blank" rel="noopener">date-fns</a> with 21.2k stars. I haven't used date-fns, so here I can't compare both. But of course some time. It is not only the size that makes it my choice, but also the APIs, that resembles momentjs. So it will be a very little pain for me to move from momentjs to dayjs. But just before moving, I made some comparisons for sizes and performance, as everyone says it is the best lib package in their documentation, but the reality comes when you start looking in the things yourself.
<h2 id="moment-js-vs-day-js"><a href="#moment-js-vs-day-js">momentJS vs DayJS?</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/tr:n-blog_in_content/dayjs-versus-momentjs_K9ZZSejiE.jpg" alt="momentjs-vs-dayjs" width="100%">
<figcaption>Photo by&nbsp;<a href="https://unsplash.com/@jsnbrsc?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Jason Briscoe</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/fight?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>
</figure>
<hr>
You may also like: <a title="Day JS CDN for free" href="../../blog/dayjs-cdn" target="_blank" rel="noopener">Day JS CDN for free</a>
<hr>
So, for comparing momentJS with dayJS, I create three react projects using the command&nbsp;<code>npx <a title="create-react-app" href="../definitions/cra-create-react-app">create-react-app</a></code> with names dayjs-example and momentjs-example and minimal. dayjs-example is to test dayjs, and so on. minimal is just the empty <a title="boilerplate" href="../definitions/boilerplate">boilerplate</a> for reference to the other two projects.
<ol>
<li>
<h3 id="import-cost"><a href="#import-cost">import cost</a></h3>
I added import statements in the <code>App.js</code>&nbsp;created by&nbsp;<a title="create-react-app" href="../definitions/cra-create-react-app">React CLI</a>&nbsp;boilerplate and just called&nbsp;<code>format</code>&nbsp;function for both in their corresponding projects and&nbsp;<code>minimal</code>&nbsp;is just the boilerplate, to compare how much each library causing the increase in size.&nbsp;
Import costs for dayJS&nbsp;showed 7.2K (gzipped: 3K)&nbsp;and for momentJS, it showed&nbsp;130.6K (gzipped: 48K).&nbsp;Here they show a huge difference, but these are just import costs, it may differ at the time of building depends on how each library has implemented imports and working of webpack according to the functions used in our code.
</li>
<li>
<h3 id="bundle-size"><a href="#bundle-size">Bundle Size</a></h3>
Now next I just built all of the three projects to check how much they differ in the bundle size. And here is the result I got.
<h4 id="day-js"><a href="#day-js">DayJS</a></h4>
42.3 KB&nbsp; 2.1807f41e.chunk.js 778 B&nbsp; &nbsp; runtime-main.950151df.js 633 B&nbsp; &nbsp; main.1cb3d8cc.chunk.js 556 B&nbsp; &nbsp; main.d1b05096.chunk.css
<h4 id="moment-js"><a href="#moment-js">MomentJS</a></h4>
56.24 KB&nbsp; 2.891328c7.chunk.js 783 B&nbsp; &nbsp; &nbsp;runtime-main.5092e59c.js 635 B&nbsp; &nbsp; &nbsp;main.c2cbbad2.chunk.js 556 B&nbsp; &nbsp; &nbsp;main.d1b05096.chunk.css
<h4 id="minimal-project-without-any-external-library-aside-from-boilerplate"><a href="#minimal-project-without-any-external-library-aside-from-boilerplate">Minimal Project (without any external library aside from boilerplate)</a></h4>
39.84 KB&nbsp; 2.917d530d.chunk.js 768 B&nbsp; &nbsp; &nbsp;runtime-main.bd245a24.js 608 B&nbsp; &nbsp; &nbsp;main.a5ca775c.chunk.js 556 B&nbsp; &nbsp; &nbsp;main.d1b05096.chunk.css
So here, moment caused an increase of approx 16.4K and dayjs caused 2.46K which is a huge difference again. Momentjs caused around 8 times more size than the dayjs. It may vary on how much functions you use in your code from both the libraries.
</li>
<li>
<h3 id="performance"><a href="#performance">Performance</a></h3>
Now, I'll show my results of testing the format functions for both momentjs and dayjs. I installed both momentjs and dayjs in my minimal project (size comparison is done). I wrote the following chunk of code in <code>App.js</code> function
<pre class="language-javascript"><code>useEffect(() =&gt; {
	console.time('1');
	moment().format('DD-MM-YYYY');
	console.timeEnd('1');

	console.time('2');
	dayjs().format('DD-MM-YYYY');
	console.timeEnd('2');

}, []);​</code></pre>
and the output of the following results as follows
<pre class="language-javascript"><code>1: 2.2763671875ms
2: 1.260986328125ms​</code></pre>
so it is clearly seen that dayjs took around half of the time of momentjs for the same function.
</li>
</ol>
<h2 id="conclusion"><a href="#conclusion">Conclusion</a></h2>
<figure><img src="https://ik.imagekit.io/garbagevalue/tr:n-blog_in_content/conslusion_cBDHlNVmu.jpg" alt="momentjs-vs-dayjs-conclusion" width="100%">
<figcaption>Photo by&nbsp;<a href="https://unsplash.com/@kellysikkema?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Kelly Sikkema</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/end?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>
</figure>
Now, the conclusion of the article is dayjs is the lightweight alternative to momentjs.&nbsp;BUT&nbsp;again, dayjs can't replace momentjs completely, or we can say hasn't replaced yet. Momentjs offers a lot of other things like timezone, which is not supported by dayjs yet. dayjs is a good replacement of momentjs for basic date transformations, display, formatting, and so on. So it's all upon your requirements. Thank you for reading. I hope you enjoyed it, if I missed anything or has any mistake in the comparison of both libraries, please let me know <a href="mailto:('sirajalam049@gmail.com')" target="_blank" rel="noopener">sirajalam049@gmail.com</a>

DayJS is the lightweight alternative of momentJS for basic transformations and transformation. Learn how they differ and how much dayJS is beneficial to use it at the place of momentJS.

Learn how dayjs is the lightweight alternative of momentjs and a comparison between them through various aspects, bundle size, performance etc.

garbage value weekly crunch