DEV Community: Arsalan Khattak

GitHub Command Palette

Arsalan Khattak — Sun, 28 Nov 2021 18:43:22 +0000

GitHub has introduced a number of amazing features this year (2021) and personally I love them all (codespaces, copilot etc).
One of them is Command Palette. Which makes it really easy to navigate and change settings anywhere on GitHub.

You can do things like toggling between Dark/Light mode, creating new repositories, issues, pull requests etc without navigation between pages.

Opening Command Palette

You can open command pallete using one of the following keyboard shortcut:

Windows and Linux: Ctrl + k or Ctrl + alt + k
Mac: ⌘ + k or ⌘ + option + k
When you open the command palette, it shows your current location at the top left, for example:

Prefixes

The command palette has different prefixes.

# for pull requests and issues
> for commands
? for help

More prefixes

Let's try something with command palette.

Toggling modes from Command Palette

Toggling modes from command palette is pretty simple and super quick. All you need to do is to simply open it and type > theme and it will list down the available options.

For more details, visit GitHub Command Palette.

GitHub Copilot - Everything you need to know

Arsalan Khattak — Mon, 12 Jul 2021 10:59:49 +0000

Let's talk about a very exciting product that was recently launched by GitHub, which is called GitHub Copilot.
GitHub Copilot is your new AI Pair programmer, powered by OpenAI. It helps you to write utilify functions, tests, and explore new API(s) without having to lookup for answers on internet. It generates or autocomplete code for you.

Installation

It's currently not available publicly, so if you want to use it, you've to join the waiting list by visiting GitHub Copilot and head over to Sign up page.

It is already enabled on my account 🎉, so I can use it right now.
Once it is enabled, you can install it in Visual Studio Code

After installation and authenticating it with your GitHub, you'll see Copilot icon in Visual Studio Code at bottom right.

You can enable/disable Copilot by tapping this icon.

Usage

Let's start with some simple and basic utilify functions.

Suppose, I want to have a function which accepts a number as an argument and returns the double of it, here's how Copilot helps me.

Let's try with a function that finds even numbers in an array

Maybe try something related to dates?

When Copilot gives you a suggestion and you hover the mouse on last character, it gives you options to navigate between Next and Previous , Accept current suggestion or Open Copilot which shows list of all the suggestions available.

These were some simple utility functions, maybe we should give a try to use Node.js default modules, such as fs.
Depending on the what function name you use, Copilot gives different suggestions.

Okay, enough of simple examples, let's quickly build a simple CLI based application that fetch user GitHub details (api.github.com/users...)

CLI Applications start with a shebang which syntax I always forget, but now no more (Yes, Copilot also works for comments

Here's the basic template

Now let's start using copilot. The very first thing is to extract username from arguments as the user will be passing it dynamically

./cli.js khattakdev

Here khattakdev is a GitHub Handle

Here's the code for extracting username from arguments

and here's the code for making an API call, since axios is imported, so copilot suggests an axios call

Here's the whole code for CLI application, which we created in a minute using copilot.

Conclusion

Copilot is an awesome tool that works for creating utility functions, writing test cases, and exploring new API(s). It also works for comments and it gives you multiple suggestions.

Core Web Vitals - Plain English

Arsalan Khattak — Sat, 08 May 2021 13:40:55 +0000

Optimization is one of the most important things to do in order to have the long-term success of any website. Google helps developers to optimize their websites as much as possible and for this purpose, we have Web Vitals.

Web Vitals

Web Vitals are the performance metrics that are used to measure how fast, stable, and optimized a website is. Web Vitals are an initiative by Google that helps the developers to deliver a great experience.
There are various metrics that can be used as a performance standard to optimize and improve the experience, including (but not limited to):

DOM Load -- time to load HTML content
First contentful Paint (FCP) -- time the browser takes before it renders the very first content
First Meaningful Paint (FMP) -- when the primary page content becomes visible to the user
Time to Interactive (TTI) -- time the browser takes to make the page fully interactive

Core Web Vitals

Core Web Vitals are a subset of web vitals that are applicable on every web page. The metrics that make up the Core Web Vitals will evolve with time but for now, it focuses on three aspects of the user experience

Loading -- how quickly page loads
Interactivity -- how soon you can interact with the page
Stability -- how stable the page is

The metrics that makeup Core Web Vitals are:

Largest Contentful Paint (LCP) -- measures performance
First Input Delay (FID) -- measures interactivity
Cumulative Layout Shift (CLS) -- measures visual stability # Image

Largest contentful Paint (LCP)

This is a metric that measures performance - How quickly the largest item is rendered on the screen. It can be an image or a text block.

LCP should occur within 2.5 seconds of when the page first starts loading.

The elements considered for LCP are following:

<img> elements
<image> elements inside an <svg> element
<video> elements
An element with background image that is loaded via url()
Block-level elements that contains text nodes

First Input Delay

This is a metric that measures the time between the user performing an action (such as a button click) and the browser processing that action. This metric is about interactivity.

FID of 100 milliseconds or less provides a good user experience.

Cumulative Layout Shift

This metric is to measure the visual stability of the page. You might have experienced this yourself, when you are reading an article and suddenly an image shows up and fits in between the paragraphs, changing the position of paragraphs. Cumulative Layout Shift helps to address such kind of problems by measuring how often it occurs.

CLS of 0.1s or less should be maintained to provide a good user experience.

Measure Core Web Vitals

If you want to measure the Core Web Vitals using JavaScript, the good news is you can by using web-vitals, which is a JavaScript library built by the Chrome team. This library includes other metrics as well such as First Input Delay.

With the web-vitals library, measuring the core web vitals is as simple as invoking a function.

import {getLCP, getFID, getCLS} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

^{* Images taken from web.dev}

Modifying Windows Terminal

Arsalan Khattak — Fri, 22 Jan 2021 12:11:57 +0000

Most of us (developers) love using terminal and I personally prefer Terminal over GUI especially when it comes to Git BUT if you're a Windows user, the command prompt is so boring.

Have you ever seen Mac OS terminals? Aren't they cool? Let's try to change our windows boring command prompt to something like this:

There are several steps to follow.

Downloading Windows Terminal
Installing Modules
Changing Fonts
Changing Theme

Downloading Windows Terminal

By default, Windows provides Command prompt and PowerShell. We will not modify any of these but rather download Windows Terminal.
It is recommended to download it from Microsoft Store. Make sure your Windows version is the latest.

I've already downloaded and installed it on my computer. Once it's downloaded and installed, open it from Windows Start by simply typing Windows Terminal

By default, it looks something like this

Installing Modules

There are two modules that we need to make our terminal looks awesome.

Oh My Posh is a module that helps you to decorate your Powershell and make it look more colorful.
Posh git is a module that helps you to provide autocomplete for git commands, paths, and branches.

To install these two modules, run Windows Terminal as Administrator.

Execute

Install-Module oh-my-posh

This will also ask you to install NuGet if not installed. I've already installed it on my computer.

Next is to install posh-git

Install-Module posh-git

Now that we have both modules installed, it's time to import them.
To do that, execute the following commands

Set-ExecutionPolicy Unrestricted

(The above command will remove the restriction of 3rd party script execution)

Import-Module oh-my-posh

Import-Module posh-git

(Optional)

Set-Theme Paradox

You'll be able to see a difference

The change looks a bit odd, there is a small blue triangle after ~ (Tilda). Let's fix that later.
There is one other problem that every time you start Windows Terminal, you'll need to import the modules again.

To fix this issue, we need to create a file in the Windows Terminal folder and paste all these commands there.

If you do

echo $profile

You'll get a file path in return, that's the file, which is executed every time we start Windows Terminal
We just need to simply add those import commands to this file.
To do that,

notepad $profile

This will ask you to create this file if it doesn't exist.

Paste the following commands and save the file.

Import-Module oh-my-posh
Import-Module posh-git
Set-Theme Paradox

Now try restarting your Terminal and it will still have the change.

Changing Fonts

That small rectangle you see is because of unsupported fonts. We need to change the fonts. I recommend using Fira Code. Simply download it and install it on your computer.

Once installed, open Windows Terminal's settings

Go to defaults located under profile and add

"fontFace": "Fira Code"

Save the file and check your Windows Terminal, it will now look awesome.

Changing Theme

Let's try to change the theme and make it look cooler.
Windows Terminal Themes has a number of amazing themes available. Find a good theme for yourself, I'll go with Dracula and tap on Get Theme to copy JSON data.

Open Windows Terminal's Setting, navigate to schemes, and paste the copied JSON data.

Next, navigate to defaults where we previously added fontFace and add the following

"colorScheme": "Dracula"

I've copied Dracula, that's why its value is Dracula, depending on the theme you copied, the value will be different.

Save the file and revisit your Windows Terminal. Tadaa!! 🎉🎉

Javascript Coercions (Conversions)

Arsalan Khattak — Wed, 06 Jan 2021 18:10:45 +0000

This blog is about Javascript Coercion - converting one type to another. This blog post covers the hidden steps/algorithms that the Javascript engine takes to convert to another type.

Motivation

The motivation behind this blog is that many developers have no idea how Coercions or conversion works in Javascript. Therefore, they consider these value conversions something evil but it’s actually not. Many developers I talked to, think that these conversions have bugs. I don’t think you can call them bugs but inconsistencies.

Introduction

Let's start with a few weird cases of conversions.

[] == 0     // true
[] == ![]   // true, WHY?
NaN == NaN  // false, weird
1 < 2 < 3   // true, cool
3 > 2 > 1   // false, wait what?

For some of you, some of these examples might look okay to e.g. [] == 0 or NaN == NaN but the other might looks weird. Once you know the algorithm that the javascript engine uses to convert these types, this will look normal.

Abstract Operations

There are certain sets of operations known as Abstract Operations that help in converting values from one type to another.
Now keep in mind that these operations are not actually available in Javascript, you can't call them just like a normal function. They are only called by Javascript Engine.

ToPrimitive

This operation converts any non Primitive value to a primitive value i.e. either to a number or to a string, depending on a hint, that is passed to this method toPrimitive(object, hint). For example, if there is some string-based operation on a non-primitive value, it will send String as a hint.

This method accepts two arguments (object, hint). The first one is the non-primitive value that needs to be converted. The second one the hint. The hint is either string or number.
There are two more abstract operations, one of them is called depending on the hint. Those operations are

valueof()
toString()

If the hint is number, toPrimitive will call valueof operation, which will try to convert the object to a number, in case if it fails, it will go for toString.

If the hint is string, toPrimitive will call toString operation, which will try to convert the object to a string, in case if it fails, it will go for valueOf

Converting to String

Starting with strings, let's take a look at some easy examples of converting to Strings.

undefined == "undefined"
null == "null"
false == "false"
42 == "42"
0 == "0"
NaN == "NaN"
-0 == "0"   // Edge Case

All the primitive types, when converted to a string, are just wrapped with double-quotes. -0 is a special case, which is converted to 0.
(💡 Yes, -0 actually exist in JavaScript )

Now let's take a look at some non-primitive to primitive (string examples)

[1, 2, 3] == "1,2,3"
[,,,] == ",,,"
[null, undefined] == ","
[] == ""
[[],[],[]] == ",,"

Some complex examples, may or may not looks normal to you (depending on your experience) but don't worry we will talk about the actual algorithm in just a while.

An array with primitive values, when converted to a string, is that same array, joined together with commas.
An array with an empty index is converted to a combination of commas.
null or undefined in an array is converted to an empty string ( [1, null, 2] will be converted to 1,,2 )
An Empty Array always becomes an empty string.
An empty nested array also becomes an empty string.

Some more examples

{ } == "[object Object]"   // Empty Object
{ a: 2 } == "[object Object]"
function() { } == "function(){}"

An object (either empty or not) when converted to String, it is [object Object]. Functions, when converted to a string, just wraps themselves in double-quotes.

Okay, now let's take a look at the algorithm that the Javascript engine uses to convert a value to a string type.

So the algorithm is

undefined will be "undefined"
null will be "null"
boolean will be "true" or "false"
Number when passed, will be wrapped in double-quotes.
So on...

The Object will use the toPrimitive abstract operation with hint string. The returning value will be then again passed to this toString and it will return you the result.

Converting to Number

undefined == NaN
null == 0
True == 1
False == 0
"0" == 0
"-0" == 0
"" == 0

Some weird cases are undefined is NaN but null is 0, "-0" is -0 but -0 is "-0" (previous example, converting to string). Well, these are just inconsistencies.
Take a look at a few more non-primitive examples.

[""] == 0
[[[]]] == 0
[null] == 0
[undefined] == 0
[1,2] == NaN

Almost all of them converts to 0, except for the last example.
To understanding the working, keep in mind two rules of Javascript

An empty string, when converted to a number will always be 0.
An empty array when converted to a string, will always be an empty string.

Now what happens here

[""] is converted to empty string ( "" ), which is then converted to 0.
[[[]]] nested empty array is converted to an empty string, which is then converted to 0.
[undefined] and [null] is converted to an empty string, which is then converted to 0. (Null and Undefined always becomes an empty string. [undefined, null] when converted, becomes "," )
Last one is NaN because [1,2] is when converted, it becomes "1,2" which is then converted to a number ( NaN, because of the comma )

Here's the algorithm that the JavaScript engine uses to convert any type to a Number.

The algorithm for converting an object to a Number is the same as converting any object to a string with the difference of hint, which will be Number in this case.

Converting to Boolean

// Falsey                         Truthy
0, -0                       // Everything Else
""
false
undefined
null
NaN

Booleans are easy. All the values that are mentioned in the list of Falsey are false when you convert them to boolean and everything else (an object, a non-empty string, numbers greater than 1, etc) will be true when converted to boolean. These values will always behave the same under any circumstances. Just memorize this list and you'll be able to write bugs free code when converting to a boolean.

Here's what the docs say:

Pretty straight forward, isn't it?

Coercions

Double Equals (==) - Good or Bad?

I'm sure you've seen a lot of blog posts and articles where the author discouraged you not to use double equals. These blogs author wants you to always use triple equals ===. The reason they give is that == do the coercion which is something evil.
Well, I disagree with this. Coercion is evil when you don't know anything about it and that's why you end up having buggy code (which is not actually buggy). Instead of avoiding ==, whenever possible, you must familiarize yourself more with the arguments and values type.
Now I do not say to always use == and never use === and I also disagree with what those blog articles suggest to you.
Use a suitable one based on the scenario. You actually can not ignore == at all. In fact, you are already using it in your code but you don't know. We all do coercions, but we don't know that.

Implicit Coercion

let arr = [`1,2,3,4];
while (arr.length) {
 arr.pop();
}

The above code snippet will execute until the length of the array is 0. Here we've used implicit coercion (the double equals). HOW?
So we have an array arr and we get its length by arr.length which returns 4. Notice we used arr.length as a condition of while(){} which is actually converting the number to a boolean. Now as you studied earlier, any number greater than 0 is true, when converted to boolean, so this returns true until the length becomes 0.

Another example:

var userAge = document.querySelector(".ageInput");

function doubleAge(age) {
   return age * age;
}

doubleAge(userAge.nodeValue);

Here again, we did implicit coercion(the double equals). The userAge is getting a value from the HTML input element, so it's of type string, but the return age * age is actually doing a multiplication, here the age is converted to number for multiplication.

One more:

var userAge = 21;
console.log(`Your age is ${userAge}`);

Here the type of userAge is an integer but when passed as an argument in console.log it is implicitly converted to a string.

Conclusion

On taking a look at the specs, we can conclude that

JavaScript has some edge cases, which can be avoided by reading the documentation
It's better to understand your variable types rather than using triple equals (===) everywhere
We are using double equals (==) in our code unintentionally

Chrome V8 Engine - Working

Arsalan Khattak — Sat, 15 Aug 2020 10:57:17 +0000

If you use Javascript, you might already know what is a V8 engine, if not, you will come across this word in the future. V8 is a javascript engine build by Google for Chrome and now Microsoft Edge also uses it.
This blog post will give you an idea of how the V8 engine works.

Table of Content

Javascript Engine
Compiled or Interpreted?
V8 Engine
Parsing
Ignition
TurboFan
Assumptions
Conclusion

Javascript Engine - What and Why?

Let's take a step back and talk about engines in general.
Do we need a Javascript Engine? What's the purpose of a Javascript?

Javascript engine helps to convert Javascript to machine-readable code. That's why the Javascript engine is something very essential to execute your code.

Each browser uses a Javascript engine. Here are a few of them.

V8 (Chrome, Microsoft Edge and Nodejs)
Chakra (Internet Explorer)
SpiderMonkey (Mozilla Firefox)
JavascriptCore (Safari)

Compiled or Interpreted?

There are two ways in which a language is translated into a machine-readable form.

An interpreter helps interpret the language line by lines such as Python and PHP.
A compiler helps to compile the whole code to machine language and then execute it.

Interpretation helps in faster execution but lack of optimization. Whereas, compilations help in optimization but is slow when it comes to execution because it first reads the whole file and converts it to a machine-readable format.

Javascript uses the best of both worlds and makes a JIT (Just in Time) compilation. This helps in faster execution and optimized code.

V8 Engine

V8 is a javascript engine developed by Google. It's an open-source project, written in C++. V8 can be used as standalone too.

There are several steps that the V8 engine takes to convert your code.

(Source - v8.dev)

Parsing

The first step is to convert into AST (Abstract Syntax Tree). The V8's parser does that job, it takes the code and parses it into AST.
Abstract Syntax Tree is a tree representation of the source code.

There are two steps in this phase,

Lexical Analysis
Syntactical Analysis

Lexical Analysis

Before we parse the code into an Abstract syntax tree, we first convert it into Tokens. This conversion to tokens happens in Lexical Analysis.
A Scanner consumes a stream of Unicode characters, combine it into tokens, and remove all the whitespace, newlines and comments, etc.
These tokens are keywords, operators, etc.

Syntax Analysis

Once the engine converts your code into tokens, it's time to convert it into Abstract Syntax Tree. This phase is called Syntax Analysis.
The tokens are converted into Abstract Syntax Tree using V8's Parser and the language syntax validation also happens during this phase.

Ignition

The heart of the V8 engine is Ignition and TurboFan.
Ignition is the component that helps to interpret your bytecode.
Once the engine has AST, it sends this tree to Ignition which converts it into bytecode. Then this bytecode is interpreted by a high-performance interpreter.

(Soruce - v8.dev)

Ignition has a swift startup time, and the bytecode it produces is very small, so V8 uses it to execute the code on page load. Ignition is used for the infrequent code because the performance comes at a cost and V8 doesn't want to consume a lot of memory.

TurboFan

TurboFan is an optimizing Compiler, which compiles your code to an optimized Machine language. It generates an extremely fast Machine Code. It does this with the help of assumptions (we will get into this in a while).

Since the TurboFan generates an optimized Machine Code, the V8 uses TurboFan to produce an optimized version of frequently used code.

Assumptions

Now you have an idea of Parser, Ignition, and TurboFan and you also know how they work. Let's go a little deeper into how Ignition and turboFan work together to provide fast and optimize code.

Before we dive into it, let's first understand a term Hot Code. Any function or a chunk of code that is repeated several times is called Hot Code. For example

while(i == 1000) {
    doAwesomeThings();
    i++;

}

This code snippet will execute function doAwesomeThings thousand times, so its a frequent code (Hot Code).

Now let's understand how Ignition and TurboFan work together.
When Ignition interprets the bytecode.

It gathers Type Feedback, which is the information of types.

var numbers = [1,2,3,4,5]
numbers.map(x => x + 2);

Type Feedback: x is a Number

If the function is running frequently, it detects Hot Code.
Ignition send the Type Feedback to TurboFan
With the help of Ignition's type feedback, TurboFan makes optimistic assumptions to produce optimized code.

That map function which you saw above has an addition operator and according to EcmaScript, these are the steps for the addition operator

You see it checks for the types and then makes a decision but when Ignition does the Type Feedback, it crosses out some part of the algorithm. Like in the case of our Map function, with the help of Ignition's Type Feedback, TurboFan will assume that the x will always be a number, so it optimizes the code by removing some part of spec level code.

This way the engine used the optimized version to execute your code.

Now, what if the array has a string in it?
The assumption will fail and Ignition will resume execution.

Conclusion

So to conclude the whole concept, the way V8 Engine works is

Code is parsed to AST by a Parser
Ignition converts it into Bytecode and an interpreter reads it (This Interpreter is in Ignition)
If Ignition finds a Hot function, it makes an assumption and sends it to TurboFan.
TurboFan uses these assumptions to generate an optimized version of that code.

Note: There is more than just Ignition and TurboFan, I did not cover things like Garbage collection, Function Call Stack, Heap, etc. That is for another day.

MLH Fellowship - My Experience

Arsalan Khattak — Tue, 11 Aug 2020 13:12:09 +0000

I never imagined that one day I will be sharing my MLH Fellowship experience. I feel so proud to be part of the MLH Fellowship. It really helped me to build my portfolio and connections.
In this blog post, I will share how I get into this program, how exactly it helped me with my career, and what I learned?

I'll not cover program details such as the recruitment process, program timeline, etc because I already made a Podcast 🎤 on it. You can check it out HERE 🎤🎤🎤

My Major League Hacking Experience

When I heard about Fellowship for the first time, I visited the website, took a look, and closed it thinking I am not good enough to apply for this program. Yes, I actually thought that.
A week later, I saw a Facebook post about it in the Facebook Developer Circles group, which excited me and I thought let's give it a try. Surprisingly, I was selected for the program 🎉🎉

Before starting my Fellowship journey, I had no idea how can I contribute to a project. I had no guts to even look at a project's source code.
Here's the improvement

MLH Fellowship gave me the confidence to contribute to any open-source project. I now love to take a look at source code, report issues, or fix them by Opening Pull Requests.

Not only this but it improved my Portfolio as well. I recently received a job offer from a company without even applying for it. They were looking for Nextjs Developer and my contributions to Nextjs helped me appearing on their search.

Project Details

In the Fellowship program, I worked on Nextjs, an open-source ReactJs based Framework that I'm in love with. Most of my contributions were in the form examples, I added new examples that users can use as boilerplate, modified existing ones, and improved some performance by modifying Nextjs Prefetch Function.

Additional Thoughts / Feelings / Stories

There is something special about MLH which made me fell in love with this community and that is the support. MLH is extremely supportive. Huge shoutouts to Will Rusell and Leah Caputo.

Typescript - Data Types

Arsalan Khattak — Sat, 08 Aug 2020 11:56:38 +0000

Types are the most basics of every programming language. So, let's start looking into Typescript's data types

Booleans

Booleans are the most basic data type with just two values true or false. In typescript, we define typescript as

let isAuthenticated: boolean = false;

The extra part : boolean is a variable type.

Numbers

To define a variable which has type number, we simply have to add : number before the assignment operator

let num: number = 5;

If you change its value from 5 to "5", Typescript will give an error Type '"5"' is not assignable to type 'number' because this variable can now only hold numbers.
It can also hold Floating, binary , hexadecimal, octal numbers.

Strings

By now, I am sure you know the basic syntax for Typescript variables. We can declare strings as

let name: string = "Arsalan";

You can also use single quotes

let name: string = 'Arsalan';

Null and Undefined

In Typescript, we have other types known as null and undefined and we can declare them as

let somethingNull: null = null;
let somethingUndefined: undefined = undefined;

These two variables will always be null and undefined and you can't change them. They are not extremely useful on their own but there are some cases where they come in handy. For example, if you are trying to fetch a value from somewhere and that value is either string or null, in that case, you can declare a variable that can be string or null.

let fetchedValue: string | null;

If you try assigning null or undefined to a variable which must be of type string, you will see it works, e.g.

let thisWorks: string = null;

That's because Typescript avoids null and undefined because these two types are subtypes of string, number etc.
To avoid this behavior, and show an error, you can add this one line to your compilerOptions in tsconfig.json

"strictNullChecks": true

Array

Let’s talk about some non-primitive types such as Arrays and Objects. For Arrays, we have to add square brackets after the type
For example, if we want to want to have an array of numbers

let numArr: number[] = [1,2,3,4,5];

Similarly, for Strings

let names: string[] = ["John", "Lisa", "Smith"];

There is also a second way to declare arrays, by using Array<elementType>

let names: Array<String> = ["John", "Lisa", "Smith"];

Tuple

Tuple is something you never heard of in javascript, In javascript, we don’t define the length of our arrays, because we can not, Tuple helps us to express the length of our arrays. Here's a simple example of Tuple

let numbers: [number,number] = [1,2];

If you try to add any additional item to names array, you will get an array

let numbers: [number,number] = [1,2,3];
// Error: Type '[number, number, number]' is not assignable to type '[number, number]'

but this will work still work

let numbers: [number, number] = [1, 2];
numbers.push(2);

That's because type safety doesn't work with .push().

You can also have an array of fixed length which can store different types. For example,

let mixed: [number, string, number] = [1, "Two", 3]

Objects

We have covered most of the things, let's talk about the most interesting type, Objects. Here's a simple object declared in Typescript.

let obj: object = {
    val: 4,
    foo: "bar"
}

We will talk more about Objects in upcoming blogs when you learn some more Typescript.

Enum

If you have worked with C# or Java, you are most likely familiar with Enum. They are a set of predefined constant values. A simple example of Enum is

enum Days {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

let satur: Days = Days.Saturday;  // 5

Enums can also be accessed by their index.

enum Days {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

let sat: string = Days[6]; // Sunday

By default, enum starts with an index 0 but we can modify their index. For example

enum Days {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday = 10,
}

let sat: string = Days[10]; // Sunday

In the above example, Sunday has an index of 10.

Any

At this point, you learned all the primitive and non-primitive types that exist in Javascript. But, you might be wondering how can I have a variable which can accept any value? Is there any way to declare such a variable in Typescript? The good news is YES, there is a way to declare such a variable.

let giveMeAnyValue: any = 1;
giveMeAnyValue = "Two";
giveMeAnyValue = [1,"Two"];
giveMeAnyValue = {
    one: 1,
    two: "Two"
}

The above code snippet will work fine because we specified its type as any, which means this variable can have any type.

This also works for Tuple

let arrayOfUnknownTypes: [any, any, any] = [1,2,3];
arrayOfUnknownTypes = ["One", 2, "Three"]

If you are not sure about the type, you can use any.

Never

One other type, we can use is never which means no value.

let dontGiveMeValue: never = 1;

The above example will give you an error Type '1' is not assignable to type 'never'.. That's because it will not accept any value at all.
This never is used as the return type for those functions which always throw an error or which goes into an infinite loop.

function dontWork (): never {
    throw Error("You FAILED!")
}

This was all about Typescript Data Types. You can take advantage of these static types to avoid javascript coercions if you don't like them.

NodeJS - Understanding Streams

Arsalan Khattak — Mon, 27 Jul 2020 06:10:16 +0000

Suppose you have to convert a file data into the Upper case. You will need to first store all the data from a file in memory, convert it to uppercase and store it back. What an easy task right? But that 2GB of data needs to be stored in memory, isn't this a terrible thing to do? Yes, it is. So what's the solution? Streams.
In this article, I'll talk about Streams in Nodejs.

Table of Content

What are Streams
Types of Streams
Creating a Readable Stream
Creating a Writeable Stream
Stream Modes
Transform Stream
Ziping and Unzipping of Streams
Conclusion

What are Streams?

Streams are one of the most powerful concepts of Nodejs. They are used to read and write data in chunks. It allows us to work with large amounts of data without consuming too much memory. Streams are not only limited to working with files. They are also used on streaming websites like Netflix and Youtube, where the server sends chunks of data to the client.
Note: Streams are not limited to Nodejs, they are also available on other languages but in this post, we will only talk about NodeJs Streams.

Types of Streams

There are four types of streams in Nodejs

Readable: Streams from which we can read data (fs.createReadStream())
Writeable: Streams to which we can write data (fs.createWriteStream())
Duplex: Streams that are both readable and writeable (net.socket)
Transform: Streams that can transform or modify data as it is written and read. (zlib.createGzip())

We will cover Readable, Writable, and a bit of Transform Streams in this post.

Creating a Readable Stream

Readable streams as said in Types section are used to read data. A simple example of a readable stream is:
Let's have a look into another example.

const fs = require("fs");

var readableStream = fs.createReadStream("./myfile.txt");
readableStream.setEncoding("utf-8");

readableStream.on("data", (res) => {
  console.log(res);
});

In this example, we are reading a file myfile.txt and logging its data to the console. That's it. .setEncoding as the name defines itself, is a function that helps you to set character encoding.

Let's look into another example.

const fs = require("fs");

var readableStream = fs.createReadStream("./myfile.txt");

readableStream.on("readable", () => {
  let chunk;
  while (null !== (chunk = readableStream.read())) {
    console.log(chunk.length`);
  }
});

In the above example, we are trying to read a file myfile.txt and it will return you bytes of data, it received.
.on is a function which is an event emitter that lookup for events and executes the function passed into the second argument as a callback.
.read is a function is that reads some data out of the internal buffer and returns it.
If instead of chunk.length we console chunk we will receive a buffer.
For example, in my case, chunk.length was 11 bytes and console.log(chunk) returned

<Buffer 48 65 6c 6c 6f 20 57 6f 72 6c 64>

If you have noticed, the first example was printing human-readable content while this example shows Buffer. That's because in the first example we used .setEncoding().
If you want to convert this buffer into a human-readable format, you can simply use .toString() and it will return you the original context or you can go with .setEncoding() function.

Creating a Writeable Stream

So now you know how to create a readable stream, it will be easy for you to pick up writeable streams.
Here's a simple example of a writeable stream.

const fs = require("fs");

var writeableStream = fs.createWriteStream("./newfile.txt");

writeableStream.write("Hello Humans\n");
writeableStream.write("Hello Aliens\n");
writeableStream.write("Hello Other Creatures");

This will create a new file (if not exist) or override (if exist) myfile.txt and store the content we passed into .write(). On executing this example, the content of myfile.txt will be

Hello Humans
Hello Aliens
Hello Other Creatures

At the beginning of this post, I talked about a scenario, where you have to convert file data into the upper case. Let's do that by creating a readable and writeable stream.

const fs = require("fs");

var readableStream = fs.createReadStream("./newfile.txt");
var writeableStream = fs.createWriteStream("./uppercasefile.txt");
readableStream.setEncoding("utf-8");

readableStream.on("data", (data) => {
  writeableStream.write(data.toUpperCase());
});

Note: You can't use the read and write data into the same file simultaneously, which will result in losing the file content.
The above example will

Read newfile.txt data in chunks
Convert each chunk to Upper Case
Store Upper case Chunk to uppercasefile.txt

Stream Modes

There are two stream modes

Flowing Mode: In this mode, data is read automatically and provided as soon as possible via Event Emitters (.on())
Paused Mode: In this mode, .read() must be called explicitly to read the data.

In Creating a Readable Stream section, we used two examples, the first one was flowing mode, where we were using event emitter (.on("data"...) to read the data as soon as it is available. While in the second example, we were using .read() to read the content explicitly.

By default, the mode is set to paused mode but we can convert them from one mode to another.

Pause to Flowing

The paused mode can be converted to the flowing mode by one of the following ways:

Using .on("data",... event handler
Calling .resume() method
Calling .pipe() method

We have already seen the first method. Let's see the other two

resume()

const { Readable } = require("stream");

async function* values() {
  yield "Hello";
  yield "World";
  yield "Hi";
  yield "There";
  yield "Man";
}

var readable = Readable.from(values());
readable.on("end", () => {
  console.log("Reached the end, but did not read anything.");
});

In this above example, we are using Readable from streams instead of createReadStream from fs. Readable is also a read stream.
In this above example, we are also using generators.
I expect this example to print Reached the end but did not read anything. when reading from file ends. But it will print nothing on the screen. The reason for that is the stream is in pause mode.

To convert it into flowing mode and print that message, we need to add .resume() before .on().

var readable = Readable.from(values());
readable.resume().on("end", () => {
  console.log("Reached the end, but did not read anything.");
});

This will now work because it changes the mode to flowing. If generators are new to you or you don't understand this problem because of generators or Readable. Let's convert this example into fs.createReadStream().

const fs = require("fs");

var readable = fs.createReadStream("./myfile.txt");
readable.resume().on("end", () => {
  console.log("Reached the end, but did not read anything.");
});

.pipe()

This job of .pipe() function is to get the data from a readable stream and write it to a writeable stream.

const fs = require("fs");

var readableStream = fs.createReadStream("./newfile.txt");
var writeableStream = fs.createWriteStream("./secondfile.txt");

readableStream.pipe(writeableStream);

In this example, we are reading data from newfile.txt and piping it to secondfile.txt. This means as soon as we have a chunk available in readableStream, it will automatically be written into writeableStream.

You might be thinking, what If we want to operate on that data before we store it (for example convert it into uppercase). For that, we have to use Transform. We will take about those in a bit but first, let's see how to convert a flowing mode into a paused mode.

.pause()

We can convert a flowing mode into a pause by using .pause() on a readable stream.

const { Readable } = require("stream");

async function* values() {
  yield "Hello";
  yield "World";
  yield "Hi";
  yield "There";
  yield "Man";
}

var readable = Readable.from(values());
var count = 0;
readable.on("data", (res) => {
  console.log(res);
  if (count == 0) readable.pause();
  count++;
});

This example when executed reads the first value Hello from a generator and converts the stream into the paused mode. Because of this, we can only see Hello on the screen.

Transform

We will not go into much detail but cover this type of stream with a basic example. As mentioned in Types of Streams section, Transform is a stream, that can modify a data. Let's try to use pipe and convert the data into uppercase before storing it.

const fs = require("fs");
const { Transform } = require("stream");
var readableStream = fs.createReadStream("./myfile.txt");
var createableStream = fs.createWriteStream("./uppercasefile.txt");

var processData = new Transform({
  transform(chunk, encoding, cb) {
    this.push(chunk.toString().toUpperCase());
  },
});
readableStream.pipe(processData).pipe(createableStream);

In this example, we are piping readableStream to processData, which converts it to uppercase and then we pipe it again to createableStream which stores it. processData is a Transform stream, which converts available chunk into uppercase.

transform(chunk, encoding, cb) {
    this.push(chunk.toString().toUpperCase());
  },

This piece of code is used to modify the chunk of data it receives. In this example, we are modifying the chunk by converting it into uppercase and pushing it to the stream.

Zipping and Unzipping of Streams

Nodejs has a built-in module zlib which helps Zipping and Unzipping files and it's pretty simple to use.
Let's see it in action by compressing a local file.

const fs = require("fs");
const zlib = require("zlib");

var readableStream = fs.createReadStream("./myfile.txt");
var compressedStream = zlib.createGzip();
var writeableStream = fs.createWriteStream("./myfile.txt.gz");

readableStream.pipe(compressedStream).pipe(writeableStream);

This simple example takes data from myfile.txt, compress it and store it into myfile.txt.gz.
If you type cat myfile.txt.gz you will see some weird characters but you can use vim to see original content vim myfile.txt.gz which will show you original content. (Vim automatically unzip the content if it has .txt.gz extension)

Extracting is also as easy as compressing.

const fs = require("fs");
const zlib = require("zlib");

var readableStream = fs.createReadStream("./myfile.txt.gz");
var extractStream = zlib.createGunzip();
var writeableStream = fs.createWriteStream("./extractfile.txt");

readableStream.pipe(extractStream).pipe(writeableStream);

This will extract myfile.txt.gz and store the data in extractfile.txt

Conclusion

This was Streams in Nodejs. By now you have a good understanding of streams and you will be able to work with them.

You have learned what problem streams solve and why are they so useful.
You have learned different types of streams and modes.
You have learned how to read and write data from files using stream.
You have learned how to compress and extract data using zlib

TypeScript - Basic Configuration⚙️

Arsalan Khattak — Tue, 21 Jul 2020 14:31:10 +0000

Fascinated by Javascript but don't like its dynamic types and wish if it was a statically typed language? If that's the case, then you surely need to learn TypeScript which is Javascript with Types. Oh, you already know TypeScript exist? Okay, here's another Pitch. Do you want Typescript to follow your guidelines and obey the rules you defined? Yes? Wear your Seat belt.

In this post, I'll talk about Typescript basic configurations. TypeScript developers have given you some choices to guide TypeScript on how to behave. This is your time to take this responsibility and learn how to configure your TypeScript Projects.

Table Of Content

Creating a Configuration File
Understanding Configuration Options
- File Inclusion
- Project Options
Additional Configurations
Recap

Creating a Configuration File

You can create a new file with the name tsconfig.json or jsconfig.json in your project root directory. Once created, you can define some rules that TypeScript will follow, which we will talk about in a few minutes.

Note: If you don't create a config file, TypeScript will use default rules. So this configuration file is not a must but there are some rules that you must know to be able to configure TypeScript.

Understanding Configuration Options

Let's come to the main point, Configuration Options. There are tons of options available in TypeScript which I won't be able to cover but I'll try to explain some basic options that we use mostly.
The options are divided into multiple categories, I will talk about each of these categories and explain some basic options.

File Inclusion

This category includes all the files related options. These settings ensure that TypeScript picked up the right files.

Files

files is an array, where you add all the files that you want to be included when TypeScript compiles.

{
   "files": ["core.ts","pipes.ts","helpers.ts"]
}

files are used if your project has few TypeScript files that need to be compiled.

Include

include works the same like files but it is use to include directories rather than just files.

{
  "include": ["src/**/*", "helpers", "tests/**/*"],
}

This will include all directories listed in the array.
I've use wildcards in the example (**/*) which we use in include and exclude

* matches zero or more characters (excluding directory separators)
? matches any one character (excluding directory separators)
**/ matches any directory nested to any level

Exclude

exclude as the name defines, works exactly opposite of include. It excludes all the listed files.

{
   "include": ["src/**/*", "helpers", "tests/**/*"],
   "exclude": ["src/HOC/basic.ts"]
}

This will exclude /src/HOC/basic.ts file only and the rest of the files in /src will be compiled because they are mentioned in include.

Note: Files specified in exclude will be ignored if you are importing it in an include file or specified it in files array.

Project Options

These options are used to define your project's runtime expectations.

Declaration

This property (declaration) generates a .d.ts file for every TS or JS file in your project. This .d.ts the file includes type definitions.
For example, if I set it to true.Then my /src/index.ts

var userName: string = "Khattak.dev";

console.log(userName);

When compiled, will result in producing two files.
/dist/index.js

var userName = "Khattak.dev";
console.log(userName);

and /dist/index.d.ts

declare var userName: string;

Remove Comments

If you don't want to have comments in your build files, you can this removeComments which will ignore all the comments and you will get comments-free build.
For example, if you have /src/index.ts

var userName: string = "Khattak.dev";
// Let's Print userName
console.log(userName);

Its build version will be

var userName = "Khattak.dev";
console.log(userName);

Out Dir

outDir is used to specify your build's output directory. If you don't specify your output directory, TypeScript will by default add the build files into the same directory where the src file lies.
For example, the build version of /src/test/index.ts will be /src/test/index.js.

Modules

TypeScript configuration has a set of modules available which creates your build version using a specific module.
Here's an example,

import { value } from "./variables";

console.log(value);

CommonJS

"use strict";
exports.__esModule = true;
var variables_1 = require("./variables");
console.log(variables_1.value);

AMD

define(["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports.value = void 0;
    exports.value = 42;
});

ES2020

import { value } from "./variables";
console.log(value);

Additional Configurations

As I mentioned in the start, there are tons of properties available in TypeScript and I can't cover them all, so these were some useful properties. If you are interested to explore more properties, here's the list

[Recap]

Let's try to have a quick overview of what you have learned.

TypeScript allows you to define some rules by using a configuration file in your project root folder.
There are different type of properties available to configure your TypeScript project, such as:
- include
- exclude
An example of a tsconfig.json

{
"compilerOptions": {
  "module": "commonjs",
  "declaration": true,
  "removeComments": true,
  "outDir": "dist"
},
"files": [
  "core.ts",
  "sys.ts",
  "types.ts",
  "helpers.ts",
  "parser.ts",
  "pipes.ts",
]
}

Chrome 84 - What's new?

Arsalan Khattak — Mon, 20 Jul 2020 01:53:34 +0000

Chrome 84 was recently released and I am in love with the updates in the new version. In this post, I'll discuss a few of them.

Table of Content

App Icon Shortcut
Wake Lock
Idle Detection
Addtional Features
Conclusion

App Icon Shortcut

App Icon shortcuts are helpful to navigate or perform an action quickly. They are the shortcuts available to you, so you can directly navigate to a specific page without first opening the app and then navigating.
On a desktop, you can see these shortcuts by right-clicking the app icon, on android, you can long hold an app icon to see these shortcuts.

Twitter's PWA (Image from developers.google.com)

Adding Shortcuts is pretty easy, you have to add shortcut property in your manifest.json

"shortcuts": [
  {
    "name": "Open Notifications",
    "short_name": "Notifications",
    "description": "View all your notifications",
    "url": "/notifications",
    "icons": [
      { "src": "//bell.png", "sizes": "192x192" }
    ]
  },
]

Wake Lock

Think of that time when you are trying to make a delicious dish using the master recipe that you just found on google. Your hands are dirty and your mobile screen turns off. Agghh! Now you have to wash your hands, to use turn on the screen. I dislike this experience. I'm sure you don't want your website users to experience the same.
Good News! you can use Wake lock to avoid screen lock.

navigator.wakeLock.request('screen')

This function will stop the screen from locking.
Note: Wake Lock might fail sometimes (e.g. if the battery is low). It's better to use it in try..catch statement
A live demo of wake lock is available here.

Idle Detection

Idle Detection API helps you to find out if the user is not interacting with the device anymore. To use idle Detection, you have to make sure your user has granted Notifications.
The Idle detector API has two types of the idle state.

The user Idle state: active or idle: the user has or has not interacted with the user agent (browser) for some time.
The screen idle state: locked or unlocked: the system has an active screen lock (like a screensaver) preventing interaction with the user agent. Here's an example of how to use Idle Detector API

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
});

Take a look at Detect inactive users with the Idle Detection API to learn more about Idle Detection

Aditional Feature

There are many more amazing features added to Chrome 84. Learn more about them

holistic overview

Chrome 84 has quite amazing and impressive features.

App Icon Shortcuts helps you to add shortcuts to your app icon.
Wake Lock helps your give your users a better experience by avoiding screen locks.
Idle Detectings is an API that helps you to detect if a user is currently idle.