DEV Community: Avinash

Keep Store type sync with definition

Avinash — Sat, 17 Feb 2024 05:26:19 +0000

Introduction

I wanted to drive the types from the store definition itself. To achieve this, I learned about TypeScript utilities and how to create custom ones directly from the store definition itself.

Before diving directly into the final utility, we go through some of the functionality that is provided by the typescript that is used in the final utility created.

To view the code jump to the code section

Const assertions

Const assertion tells typescript that to type will not change its length and content. So what it means is suppose the type is

const arr1 = ['a','b'];

//type is 
// string[]

const arr = ['a','b'] as const;

// type is
// readonly ["a", "b"]

Conditional Types

The syntax of the conditional types is similar to the ternary operator in JavaScript. Typescript uses extends to check the type and based on the check it either returns a truthy type or a falsy type.

type A<Type> = Type extends string ? Type: never;

const a: A<'A simple imutable string'>  = 'A simple imutable string'; // type of a: 'A simple imutable string'

const str: A<1> = 1 // error: Type 'number' is not assignable to type 'never'

Infer keyword

In typescript, we can use Infer to gather the type of type using the infer keyword.

type A<Type> = Type extends Array<infer Item> ? Item : never;

const A = ['s','a'];
const D = [1,2,3,4,5];

type B = A<typeof A> // string
type C = A<typeof D> // number

This is useful when it comes to inferring the type of items present in the array. One thing to note about infer is that infer should only be used in conditional types.

Infer can also be used to check the return type of function. For example,

type A <Func> = Func extends (...args: any) => infer Return? Return: never

const funcToReturnString = () => 's'

type B = A<typeof funcToReturnString> // type of B is string

Mapped Type

Typescript provides a way to get the type of keys in the object. We can reduce the redundant steps of mapping all the properties in object using Mapped types

type A<Type> = {
    [property in keyof Type]: boolean
}

The above type will map all properties in objects to the boolean type.
In typescript the modifiers ( are responsible for changing the mutability or optionality) of object property using Readonly of? operator in object property.

type ImmutableObj = {
    readonly name: string;
    readonly uuid: string;
}

type OptionalType = {
    email?: string;
    address?: string;
}

We can change the optionality or immutability of the object properties by adding or removing the modifiers. Let us look into the example.

type AllOptional<Type> = {
    [property in keyof Type]+?: Type[property]
}

const RequiredObj = {
    name:'Tony',
    phone: 'X-XXX-XXX'
}

type UserObjType = AllOptional<typeof RequiredObj>

There is more to mapped types in typescript documentation.

Recursive types

Recursion is the most common concept in many programming languages including javascript. At its core recursive function means calling the same function until it reaches the exist state at which point the recursive function exists.

In the context of the typescript, recursion means. Referencing the same type from its definition.

Understanding by looking into an example. If we look into typescript Readonly utility

type Readonly<T> = {
readonly [P in keyof T]: T[P]
}

The problem with the above utility is it doen’t provides readonly type for nested type types such as.

const deep = {
    a:{
        b:{
            c:['sdf', {
                d:'str'
            }]
        }
    }
}

type Deep  = Readonly<typeof deep> 

// type Deep = {
//    readonly a: {
//        b: {
//            c: (string | {
//                d: string;
//            })[];
//        };
//    };
//}

Mixing it

The goal is to drive the type definition from the initial state definition. Suppose we define the default state object something like this

const defaultState = {
  isConnected: false,
  currRoom: {
    roomName: "",
    currUser: {},
    allUsers: [
      {
        name: "",
        userId: "",
      },
    ],
  },
  gameState: {
    owner: {},
    remainingLetters: [""],
    isChoosing: false,
    guessWord: "",
    myTurn: false,
    selectedLetters: [""],
    correctSelectedLetters: [""],
    wrongSelectedLetters: [""],
    turn: {
      name: "",
    },
    isCorrect: false,
    incorrect: 0,
    gameOver: false,
  },
}

I don’t want to create a type or interface for this object as when I update the default state I’ll have to update the definition as well. How to achieve DRY for this type of definition.

The above object is the default state from which I want to drive the types. Let us go through all the approaches.

Using const assertion

We can simply use const assertion and typeof to get the types

const defaultState = {
  isConnected: false,
  currRoom: {
    roomName: "",
    currUser: {},
    allUsers: [
      {
        name: "",
        userId: "",
      },
    ],
  },
  gameState: {
    owner: {},
    remainingLetters: [""],
    isChoosing: false,
    guessWord: "",
    myTurn: false,
    selectedLetters: [""],
    correctSelectedLetters: [""],
    wrongSelectedLetters: [""],
    turn: {
      name: "",
    },
    isCorrect: false,
    incorrect: 0,
    gameOver: false,
  },
} as const

type Store = typeof defaultState 

//type will be 

//type Store = {
//    **readonly isConnected: false;** 
//    readonly currRoom: {
//        readonly roomName: "";
//        readonly currUser: {};
//        readonly allUsers: readonly [{
//            **readonly name: "";**
//            readonly userId: "";
//        }];
//    }; ....

we can see that the type of isConnected is false but we wanted TS to infer it as boolean. Another limitation is readonly name: "" is typed as an empty string rather than type string.

Using Readonly utility

We can also use the Readonly utility type provided by Typescript.

 **const defaultState = {
  isConnected: false,
  currRoom: {
    roomName: "",
    currUser: {},
    allUsers: [
      {
        name: "",
        userId: "",
      },
    ],
  },
  gameState: {
    owner: {},
    remainingLetters: [""],
    isChoosing: false,
    guessWord: "",
    myTurn: false,
    selectedLetters: [""],
    correctSelectedLetters: [""],
    wrongSelectedLetters: [""],
    turn: {
      name: "",
    },
    isCorrect: false,
    incorrect: 0,
    gameOver: false,
  },
};

type Store = Readonly<typeof defaultState>

//Store Type
// type Store = {
//     readonly isConnected: boolean;
//     readonly currRoom: {
//         roomName: string;
//         currUser: {};
//         allUsers: {
//             name: string;
//             userId: string;
//         }[];
//     };
//     readonly gameState: {
//         owner: {};
//         remainingLetters: string[];
//         isChoosing: boolean;
//         ... 8 more ...;
//         gameOver: boolean;
//     };
// }**

The Readonly utility type correctly infers type but it doesn’t add readonly to nested properties of an object. If we look into the implementation of the Readonly utility type.

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
}

Readonly utility adds readonly to all the top-level properties of the object but doesn't iterate over the nested object.

Creating custom utility

We can extend your knowledge of Readonly utility by using recursive types

type ReadonlyNested<S> = { readonly [K in keyof S]: ReadonlyNested<S[K]> };

// type Store = {
//     readonly isConnected: ReadonlyNested<boolean>;
//     readonly currRoom: ReadonlyNested<{
//         roomName: string;
//         currUser: {};
//         allUsers: {
//             name: string;
//             userId: string;
//         }[];
//     }>;
//     readonly gameState: ReadonlyNested<...>;
// }

Let us go a step further and create another type of utility called expand

type expandTypes<T> = T extends infer O ? {
  [P in keyof O]: expandTypes<O[P]>
} : never

Now when we do expansion

const defaultState = {
  isConnected: false,
  currRoom: {
    roomName: "",
    currUser: {},
    allUsers: [
      {
        name: "",
        userId: "",
      },
    ],
  },
  gameState: {
    owner: {},
    remainingLetters: [""],
    isChoosing: false,
    guessWord: "",
    myTurn: false,
    selectedLetters: [""],
    correctSelectedLetters: [""],
    wrongSelectedLetters: [""],
    turn: {
      name: "",
    },
    isCorrect: false,
    incorrect: 0,
    gameOver: false,
  },
};

type ReadonlyNested<T> = {
    readonly [P in keyof T]: ReadonlyNested<T[P]>;
}

type expandTypes<T> = T extends infer O ? {
  [P in keyof O]: expandTypes<O[P]>
} : never

type Store = expandTypes<ReadonlyNested<typeof defaultState>>

// Store type

// type Store = {
//     readonly isConnected: ReadonlyNested<boolean>;
//     readonly currRoom: {
//         readonly roomName: string;
//         readonly currUser: {};
//         readonly allUsers: readonly {
//             readonly name: string;
//             readonly userId: string;
//         }[];
//     };
//     readonly gameState: {
//         ...;
//     };
// }

Conclusion

After syncing the type definition with the store object makes a great developer experience. We can have more custom utility for typescript. Please add a custom utility that you find interesting in the commotion section.

Creating AWS EC2 instance with javascript.

Avinash — Tue, 18 Apr 2023 14:58:32 +0000

AWS EC2 is a computing service that can be used for various purposes. EC2 is one of the core services that AWS provides. This blog will walk us through creating an EC2 instance and its essential components.
AWS also provides SDK for different languages. But we will be using AWS SDK that is provided for javascript.

EC2 Client

AWS EC2 is one of the services that AWS provides. This blog assumes that you already have an AWS account(or an IAM account with EC2 policy and permission). AWS EC2 provides compute service on the AWS cloud.

To initialize a EC2 instance client we can do that using

const client = new EC2Client({region: "us-east-1"})

This uses the EC2 instance client with region us-east-1 . One can choose other regions depending on where they want to host their servers.

Credentials

Setting up credentials is the first thing to do. One should have proper permissions in order to have access to service. There are different ways to set credentials.

Load from AWS IAM roles from AWS EC2
from shared credentials file ~/.aws/credentials
Using environment variables

AWS IAM roles from AWS EC2

If we want to run our node.js application on an existing EC2 instance then the Node.js application can automatically pick up the role from the existing EC2 instances roles provided. One can use IAM roles to make API requests from EC2 instance.

Shared credentials

We can have a single file that has the AWS credentials init. By default when the AWS SDK launches it starts looking for the default credential file at ~/.aws/credentials in Linux based system, and C:\Users\USER_NAME\.aws\credentials . You can learn more from here.

You can also use AWS CLI’s aws configure commands to update the credentials in ~/.aws/credentials file. When you run the aws configure flowing wizard gets poped up.

It will ask for following things:

AWS Access key
AWS secret acess key
and session token(optional)

Environment variables

SDK will automatically detect the environment variables. In my opinion, this is the easiest way to provide credentials to the AWS SDK.

AWS_ACCESS_KEY_ID=<YOUR_ACCESS_KEY>

AWS_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>

AWS_SESSION_TOKEN=<YOUR_SESSION_TOKEN>

There are other ways for adding credentials other than these. You can find and read about it here.

AMI

AMI stands for Amazon machine image and they are the basic entity for creating the EC2 instance. You can think of it as a docker image for running the docker container. It consists of all the information(for example operating system, applications etc) that is required to initialise and start the EC2 instance. For more check out the official documentation.

Now how to get the AMI image IDs using the AWS SDK.

const { EC2Client, DescribeImagesCommand } = require("@aws-sdk/client-ec2");

 // note: region is "us-east-1"
const client = new EC2Client({ region: "us-east-1" });

const command = new DescribeImagesCommand(params);

const start = async () => {
  try {
    const data = await client.send(command);
    console.log({ data: JSON.stringify(data.Images) });

  } catch (error) {

    console.error(error);
  }
};

In the above code I want to host my EC2 instance in us-east-1 region so I wanted to know the images that are provided in that region.

Note: If you want to get launch a EC2 instance the AMI image should be present in that region.

DescribeImagesCommand this cmd comes in handy when we need to verify whether the image is present in the same location or the image is not deprecated.

AWS Virtual private cloud

AWS provides us with a private network that allows us to deploy the instance or any other compute services in an isolated network that is secure from the outside. Each VPC can consist of subnets that hold your resources. The best thing is as soon as we create an account a default VPC is automatically created for us. We can use @aws-sdk/client-ec2 ’s DescribeAccountAttributesCommand to get the information about the default VPC.

const client = new EC2Client({ region: "us-east-1" });
const input = {
  AttributeNames: ["default-vpc"],
};
const vpc = new DescribeAccountAttributesCommand(input);
const describe = await client.send(d);
console.log({ data: JSON.stringify(describe)});

This will give the output as follows

{
  "$metadata": {
    "httpStatusCode": 200,
    "requestId": "b8d6169c-b1b2-46d3-bd3a-516b48e7e2d6",
    "attempts": 1,
    "totalRetryDelay": 0
  },
  "AccountAttributes": [
    {
      "AttributeName": "default-vpc",
      "AttributeValues": [
        {
          "AttributeValue": "vpc-00df8d4abfe081231"
        }
      ]
    }
  ]
}

Since we defined the attributes default-vpc. We got the AttributeValue as the VPC id of default values. AWS VPC is one of the core services that are essential to learning, as every resource is launched on an AWS VPC by default. Another important thing to make note of it is the resources and VPC’s region and availability zone should be the same else

Security Groups

Security Groups act as a firewall for an ec2 instance, it controls the traffic going in and out of the instance. One thing to remember is when we don’t specify the security group at the time of the launch of the EC2 instance the default security group is assigned to it.

The default security group comes with its own baggage like all the inbound traffic is restricted by default. So we need to explicitly add rules to allow traffic to our EC2 instance else no one will be able to access our instance from nowhere (eg: SSH, HTTP or HTTPS)

To make our instance access to the outside world we need to open up the ports for TCP. But first, we have to verify if the port is already open but by any other existing security group

// find if we have a HTTP port already opened up
const client = new EC2Client({ region: "us-east-1" });

const sg = new DescribeSecurityGroupsCommand({
  Filters: [
    {
      Name: "egress.ip-permission.to-port",
      Values: ["80"],
    },
  ],
});

const describe = await client.send(securityG);
    console.log({ data: JSON.stringify(describe)});

The above code will return an object if we already have SG(security groups) configured with outbound ports opened for port 80 (TCP connection).

Output

{
  "$metadata": {
    "httpStatusCode": 200,
    "requestId": "28e8921a-8048-4e42-b2f2-51fb0e973bbb",
    "attempts": 1,
    "totalRetryDelay": 0
  },
  "SecurityGroups": [
    {
      "Description": "Description",
      "GroupName": "Name of SG",
      "IpPermissions": [
        {
          "FromPort": 80,
          "IpProtocol": "tcp",
          "IpRanges": [{ "CidrIp": "0.0.0.0/0" }],
          "Ipv6Ranges": [{ "CidrIpv6": "::/0" }],
          "PrefixListIds": [],
          "ToPort": 80,
          "UserIdGroupPairs": []
        }
    ]
}]

This is the object that gets returned from the above function. Let's look into IpPermission object. IpPermission holds the rules that determine the traffic coming in and out of the instance.

FromPort : Range of the ports that are allowed
IpProtocol: it will be TCP or UDP network layer protocol (i.e in case of HTTP/1 or HTTP/2 its TCP and in the case of HTTP/3 it will be UDP as HTTP/3 uses QUIC protocol that is built on top of UDP.
IpRanges: The range of IP addresses are allowed. In the case of "0.0.0.0/0" all the Ip addresses are allowed
IpV6Ranges: Ip v6 addresses that are allowed.
ToPort: The end range of the port
UserIdGroupPairs: The security group ids for which the ids belong to.

If the ports are not the opend we can create new security group

Launch Instance

Once we have opend the ports we are ready for the launching the instances. The instance can be launched using RunInstancesCommand

//launching an instnace

const client = new EC2Client(config);

const inputConfig = {
            MaxCount: 1,
            MinCount: 1,
            ImageId: 'ami-02f3f602d23f1659d',
            InstanceType: 't2.micro',
            SecurityGroupIds: ['SG_ID'],
            SecurityGroups: ['securityGroupName'],
            KeyName: 'name',
            TagSpecifications: [
              {
                ResourceType: "instance",
                Tags: [
                  {
                    Key: "Name",
                    Value: 'instanceName',
                  },
                ],
              },
            ],
          };

const instance = new RunInstancesCommand(inputConfig);
const response = await client.send(command);

this is the bare minimum config that is needed to launch an instance. There is a huge list of configs that is not provided by the default section. Most of the configs (VPC, Security Groups) are created by default when the account is created and the same default configs will be used if the config is not provided.

Another interesting attribute is UserDate which is not a required option but is very useful when we want to set up some additional things on our instance at the time of starting the instance. For example, let's say you want to install the docker on the instance right after the instance starts you can do this by

const userData = [
        `#!/bin/bash
        yum install -y docker`,
        "usermod -aG docker ec2-user",
        "service docker start",
      ].join(" && ");

const bufferString = Buffer.from(userData).toString("base64");
const instance = new RunInstancesCommand({
...inputConfig,
userData
);
const response = await client.send(command);

You can also pass user data as text instead of base 64 but I was facing some issues while doing so. Another way is to use cloud init directives in cloud-init. You debug your instance using looking connecting to instance through SSH and checking the logs /var/log/cloud-init-output.log . I had some issue while running bash scripts because aws was thinking bash scripts as cloud-init scripts and i had no idea why it was doing so.

Conclusion

Thank you guys for coming this far. AWS EC2 is one of the core services of AWS. We have covered various concepts of EC2 like networking and AMI and planing to cover the rest of the concepts in future. I have not covered storage in this blog, as i wanted to keep it short. Hope you have liked it.

Please let me know if i have missed anything or I’m wrong about anything ill try to correct it

Deep dive into the browser events with mindmaps

Avinash — Tue, 21 Mar 2023 18:04:59 +0000

This is an extensive exploration of the intricacies surrounding DOM events. First and foremost, we will delve into the various types of DOM events, examining each of their unique characteristics and how they are triggered. Additionally, we will take a closer look at some of the more commonly misunderstood aspects of DOM events, such as the propagation and bubbling of events.

What is a browser event?

Let's simply put it this way an event is an object which has the property that contains information about that particular event, such as on what element the event is triggered and many other information about that particular event.

Events can be generalised into 2 categories

User-agent events
synthetic events

User-agent events are dispatched by the browser based on user interactions or any other browser(page) task is completed.

For example

The user clicks on the button
The user submits the form
All the resources have been downloaded.

And may more, we can add a listener to the event in order to listen to the events

window.addEventlistner('load',(event)=>{console.log(event));

Synthetic events

On the other hand, synthetic events are the events that are created/emitted by applications.

For example

const event = new Event('myEvent', {bubbles:true, cancelable: true});

//dispatch events
document.dispatchEvent(event);

//events can be dispatched from any element
document.getElementbyId('myDiv').dispatchEvent(event)

If we want to pass the data then we can use CustomEvent().

const event = new CustomEvent('myCustomEvent', {detail: {message:'hello world'});

elem.addEventListner('myCustomEven', (event)=>{
console.log(event.detial.message)
})

The isTrusted is the property in the event object that is true for user-agent dispatched events and false for the applications(developers) initiated.

Event phase

When we further inspect the event object we also get a property name eventPhase. In order to understand this property let us first understand what is CAPTURING_PHASE and BUBBLEING_PHASE.

When an event is dispatched it will occur in the event will reach to document(root) and then back to the target element(in the above diagram button). The flow from top to bottom is called capturing phase and the bottom to top is called the *****bubbling phase.***** let us take a step forward and understand the above diagram with code

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body >
    <form id='submit_form' style="border:1px solid red; padding: 4rem">
    <button type='submit' id='submit_button'>Submit<button>
    </div>
    </form>

    <script>

            function eventListener(event) {
                        console.log({
                        target: event.target,
                        currentTarget: event.currentTarget,
                        phase: event.eventPhase,
                        type: event.type
                  });
            }

        const form = document.getElementById("submit_form");
        const buttonContainer = document.getElementById("button-wrapper");
        const submit = document.getElementById("submit_button");

        form.addEventListener("click", eventListener);
        buttonContainer.addEventListener("click", eventListener);
        submit.addEventListener("click", eventListener);

    </script>
</body>

</html>

This is a long example let's break it down. We have a simple form and later we are attaching some event listeners to it. The addEventListner() function takes 3 arguments

event name that the event listener should listen
a callback function that should be called.
And the last one is an option or useCapture. It is an optional argument.

All the arguments are pretty much clear by the name the only argument that we care about is option and useCapture.

The option has these parameters.

capture: The default value is false. The event will first be captured with the current element to which the event listener is attached (i.e element above in the DOM tree) and then later will be dispatched to any event target
once: The events should be invoked once and removed by default
passive: If true it tells the browser that the callback functions will not have the preventDefault(). Even if the preventDefault is there in the callback function the browser will only throw and warning in the console.
signal: It's used for removing the event listener by providing the AbortSignal. We will talk about the abort signal later in this blog.

Capturing and bubbling phase

In the example above we have attached listeners at the document, body, form and button We run the above example the output will be like this

{target: button#submit_button, currentTarget: button#submit_button, phase: 2, type: 'click'}
{target: button#submit_button, currentTarget: div#button-wrapper, phase: 3, type: 'click'}
{target: button#submit_button, currentTarget: form#submit_form, phase: 3, type: 'click'}

To understand this we first need to look into the Event object. The user agent-generated event object mainly has these properties

type: The type is the type of event for e.g click, submit etc. You can read more about it here
eventTaget: Returns the element on which the event occurred or null.
currentTarget: Returns the element which is listening to the event
eventPhase: This one is the interesting one. The event phase generally returns one of these values 0,1,2,3. What are these values? The event phase has these enums

NONE = 0
CAPTURING_PHASE = 1;
AT_TARGET = 2;
BUBBELING_PHASE = 3;

Let us understand each of these values one by one. In the above example context, the <button /> element is wrapped by a div, which is further nested inside a form. So when the button has been clicked the div and from are in the capturing phase. But in the console, we don't see any eventPhase as 1 (i.e capturing) event listener is not being invoked.

To invoke an event listener callback function in the capturing phase we need to specify true in the event listeners

 document.body.addEventListener("click", eventListener, true);

// or
 document.body.addEventListener("click", eventListener, { capture:true });

Propagation

Now that we have a solid understanding of the event phases. Let us further look into how to stop handlers from getting called. We have 2 methods for stopping the propagation of the event.

event.stopPropagation() and
event.stopImmediatePropagation()

Assume we have multiple event handlers attached to an element. We have stopHandler() and eventListenerLogs()



<!DOCTYPE html>
<html>
   <head>
      <title>Parcel Sandbox</title>
      <meta charset="UTF-8" />
   </head>
   <body>
      <form id='submit_form' style="border:1px solid red; padding: 4rem">
         <div id='button-wrapper' style="border:1px solid black; padding: 4rem"">
            <button type='button' id='submit_button'>Submit<button>
         </div>
      </form>
      <script>
         function stopHandler(event) {
           event.stopPropagation();
           console.log({
             target: event.target,
             element: event.currentTarget,
             phase: event.eventPhase,
             type: event.type
           });
         }

         const form = document.getElementById("submit_form");

                    document.body.addEventListener("click", eventListener, false);
         form.addEventListener("click", stopHandler, false);
         form.addEventListener("click", eventListener, false);

      </script>  
   </body>
</html>

We have attached the event handler to body, and form element. When we click on the button the event occurs in BUBBLEING_PHASE and the order of event propagation should be supposed to be

But since we have event.stopPropagation(), at the form level. the console o/p is

{target: button#submit_button, element: form#submit_form, phase: 3, type: 'click'}

{target: button#submit_button, element: form#submit_form, phase: 3, type: 'click'}

As we have to event handler attached to form element.

What if we want to only listen to the event only once then we can use event.stopImmediatePropagation()

function stopHandler(event) {
           event.stopImmediatePropagation();
           console.log({
             target: event.target,
             element: event.currentTarget,
             phase: event.eventPhase,
             type: event.type
           });
         }

Now the output is

{target: button#submit_button, element: form#submit_form, phase: 3, type: 'click'}

Cancelable

A cancelable event’s read-only property returns true or false based on how the event was initialized. Most of the native events are cancelable using event.preventDefault() . Calling this function is like the event never happened. We can create a syntheticEvent and make it non-cancelable.

const myCoustomEvent = new CoustomEvent("my-coustom",{
cancelable:true
})

document.addEventListener('my-event', function (event) {
   event.preventDefault()
})

console.log(
  document.dispatchEvent(event) ? 'Event was not cancelled' : 'Event was cancelled'
)

//output
//"Event was cancelled"

If we change the cancelable property to false the output will be Event was not cancelled .

PreventDefault

event.preventDefault() will stop the native element action from happening. This means that the event will not work in the same way as if the event never happened.

Conclusion.

That concludes our discussion on events and how to create custom ones. We covered the various phases involved in triggering events and explored the cancelable event.

Thank you for reading. Please let me know in the comments section if I missed anything.

Percentile for measuring performance.

Avinash — Mon, 02 May 2022 07:19:29 +0000

To understand the difference between both of the factors, let us take an example where we calculate marks percentage and percentile both.

How is the percentile different from than percentage?

A percentile is different from a percentage. A percentage is calculated based on this formula



percentage = marks obtain / total marks * 100

This equation will give the percentage of marks.

Percentile is calculated?

Percentile is a collective unit whereas percentage is individual unit.

The percentile is calculated based on this formula



percentile = (No of people behind you) / (Total number of people) * 100

So, let's say you got 90/100(i.e 90%) marks in a class of 100 students. And no one has got more than you so the percentile is 99th percentile

Another example:
Let's say you got a mark of 50% and only 20 students are behind you so the percentile will be
20th percentile

Okay, We now know the difference between percentage and percentile and we are starting to get the picture of why we measure performance based on percentile and not a percentage.
Because a percentile is a collective unit and we need to measure our response time for our users collectively and not individually

This means we don't want to say our API responded with 0.25ms for one user. We would love to say that our API response for 90% of users was less than 0.25ms.

Got it so why in percentile for measuring performance?

By far average is the easiest way to calculate and can be used to measure performance but one should not rely on average for calculating the performance and only focus on a percentile (90th percentile) to improve and measure performance.

Let us look at why?
To answer this question look at the simple bell curve.

For a bell curve average and median(50th percentile) will always be the same.

But for a real-world scenario, the graph will be something like this.

based on this graph average will be 0.97ms but that's not what most of our users are having response time.

Let us sort this graph.

We can see that 90%(P90) of our user is facing 2sec of response time but only 10%(P10) of users are having 0.97ms of response time. So we know that we need to improve our API's response time.

Conclusion

We tried to learn about different techniques and why percentile should be preferred over other techniques. And one should care about P90(i.e 90th percentile) for measuring the performance in real-world applications.

Working of event systems in DOM and React

Avinash — Sat, 02 Jan 2021 15:22:52 +0000

How the event is handled in DOM?

Suppose that you want to attach an onClick event on a button.
This can be done as follows.

 document.getElementById('myButton').onclick = function(){
    alert('Hello!');
}

Above is the most common way of attaching events in your DOM element. It has one drawback that only one event handler can be attached to the DOM element.

To overcome this there is a workaround. You can do something like this

  let el = document.getElementById('myButton')

and then attach events

el.addEventListener( 'click', function(){
     alert('Hello!');
}, false)

Okay, but how does the event move in DOM?

To answer this suppose we have an HTML code something like this

<HTML>

<head></head>

<body>
    <div id='myDiv'>
        <button id='myButton'>My button</button>
    </div>
</body>

</HTML>

When you click on the button element event "drills down" the document through its parent and then makes it way back up.
The initial "drilling down " is called the "Capture Phase" and when it circles around and goes back up to document element it is known as "bubbling phase"


Take from Alison Quaglia's Blog

Event Delegation

Let's say that you have

element and with several child elements

and let's say that you want to attach an onClick event on every li element.


<ul id='parent'>
    <li id='item-1'>item 1</li>
    <li id='item-2'>item 2</li>
    <li id='item-3'>item 3</li>
    <li id='item-4'>item 4</li>
</ul>

But the problem comes when you have to add and remove li elements. Adding and removing event listeners to li element can be difficult. The best way you can do this is by adding an event listener to the parent element (i.e ul). You can do so by:-

document.getElementById("parent").addEventListener("click", (e) => {
  if (e.target && e.target.nodeName === "LI") {
    // do whatever you want to do with it
  }
});

In the above code, we have attached an onClick event listener to the parent element and then we check if the targeted node is LI or not, if it is not it will be ignored else perform the operation that you want to perform.

What this has to do with React 17?

In React 17 the biggest change was in Event delegation. In React 16 all the events were attached at the document level. This has been changed in react 17 all event is attached at root container at which React tree is been rendered


Taken from React.org

Conclusion

Although, these changes won't be noticed by most of the production apps.

In this blog, I wanted to learn more in-depth about how the browser event system works and what is the major change in React 17

More in-depth documentation is there on React.org.

Publisher subscriber pattern in React.js

Avinash — Tue, 01 Sep 2020 14:08:49 +0000

Last week I learnt a pattern called Publisher subscriber(Pub-Sub) pattern and tried to implement it in react. This can easily be done with React's context API or any third party library like Redux, but I took a different approach.

tl;dr: NOTE: This code is not production ready. Complete working app can be found here

What is Pub/Sub pattern?

According to Wikipedia

Pub-Sub is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers, but instead categorize published messages into classes without knowledge of which subscribers, if any, there may be. Similarly, subscribers express interest in one or more classes and only receive messages that are of interest, without knowledge of which publishers, if any, there are.

In simple words, the publisher and subscriber are unaware of each other. All the communication between them is taken through events which are emitted from the publisher and notifies subscriber. As shown bellow

Pubsub pattern source msd blog

Implementing this in React

I have tried to use the Pub-Sub pattern to react in the most simplified manner that I could do with only two events (on and emit).

In this example, I'll be creating a simple modal which will act as a subscriber. Let's get started:



export const Modal = () => {
  const [content, setContent] = useState("no content");
  const [showModal, setShowModal] = useState(false);

  const setMessage = (message) => {
    setContent(message);
    setShowModal(true);
  };
  const clearMessage = () => {
    setContent("");
    setShowModal(false);
  };

  if (showModal) {
    return (
      <div>
        <h2>{content}</h2>
        <button onClick={clearMessage}>Close Modal </button>
      </div>
    );
  }
  return null;
};

Then I need an event bus which will be solely responsible for passing messages around. Here it is:




const event = {
  list: new Map(),
  on(eventType, eventAction) {
    this.list.has(eventType) || this.list.set(eventType, []);
    if (this.list.get(eventType)) this.list.get(eventType).push(eventAction);
    return this;
  },

  emit(eventType, ...args) {
    this.list.get(eventType) &&
      this.list.get(eventType).forEach((cb) => {
        cb(...args);
      });
  }
};

Here I have on event actions on and emit for a more complex system you can other event systems you can add other events such as clear, off etc.

Once we have our event system on its place let hook this event system in our modal



export const Modal = () => {
  const [content, setContent] = useState("no content");
  const [showModal, setShowModal] = useState(false);

  const setMessage = (message) => {
    setContent(message);
    setShowModal(true);
  };
  const clearMessage = () => {
    setContent("");
    setShowModal(false);
  };

  useEffect(() => {
    event.on("showModal", setMessage).on("clearAllMessage", clearMessage);
  }, []);
  if (showModal) {
    return (
      <Container>
        <h2>{content}</h2>
        <button onClick={clearMessage}>Close Modal </button>
      </Container>
    );
  }
  return null;

Next in order to complete the puzzle we need final pice that is Publisher which will emit the events




export const ModalPublisher = {
  message: (content) => {
    event.emit("showModal", content);
  },
  clearAllMessage: () => {
    event.emit("clearAllMessage");
  }
};

Okay once everything is on the place you can now we can use it in App.js



function App() {

  return (

    <div className="App">

      <Modal showModal={true} />

      <h1

        onClick={() => {

          ModalPublisher.message("this is the content from App");

        }}

      >

        Hello CodeSandbox

      </h1>

      <h2>Start editing to see some magic happen!</h2>

    </div>

  );

}

Conclusion

This code is still not production-ready still there are many edge case to cover. I have used this pattern for Modal and toast.

Comments?

Do you use like this pattern?
What else this pattern can be used for?

Mesure your create react app build.

Avinash — Wed, 01 Jul 2020 13:33:29 +0000

How to tweak webpack config?

Create react app comes with pre-configured webpack. To add your config in Create-React-App, you have to either eject it or fork react-scripts.

Other ways to modify your webpack config

You can use libraries like react-app-rewired or customize-cra

⚠️ "Stuff can break": - Dan Abramov

Mesuring speed

That been said. What I wanted to be was to just see which webpack loader or plugin took how much time. So I used react-app-rewired
It is easy to configure and use. You can go through the docs to see how it is done

Now once you are done with the setup. You need a webpack plugin speed-measure-webpack-plugin. Install it by just running this command npm install --save-dev speed-measure-webpack-plugin or if you are using yarn yarn add -D speed-measure-webpack-plugin

Now we need to add this code in config-overrides.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin({ outputFormat: "human", outputTarget: './measur.txt' });

module.exports = function (config, env) {
  config = smp.wrap({ 
    ...config,
   })
 return config
}

Once you run your build command a measur.txt file will be generated.

args and kwargs in python

Avinash — Sun, 07 Jun 2020 04:31:50 +0000

*args in Python

*args are best used when we want to pass list of arguments.
Basic usage

 def listOfValues(*args):
      print(args)
listOfValues(1,2,3)

the output will be (1,2,3)

print(args) will print a tuple of all the arguments that we are passing in when calling the function.

Example 2 passing list or dictionary

 def iterable(*args):
      print(args)
iterable([1,2,4,5])

this will print a tuple of list. Something like this ([1,2,3,4,5],)

Note: If you are familiar with ES6 rest operator. *args works a lot similar rest operator in ES6.

**kwargs in Python

**Kwargs accepts named arguments instead of positional arguments. When we use **Kwargs in parameter and try to print the values we get a dictionary.

   def getValues(**kwargs):
       print(kwargs)
   getValues(a=1,b=2)

The output is going to be {"a":1,"b":2}

another example where we use **kwargs for adding numbers

   def add(**kwargs):
    res = 0
    for k in kwargs.values():
        res+=k
    print(res)


add(a=1,b=2, c=3)

Output is 6

Note:- The order of parameters has to be in the exact order
1. Standard arguments
2. *args arguments
3. **kwargs arguments

Atomic-CSS in Styled-components

Avinash — Mon, 11 May 2020 04:20:08 +0000

Atomic CSS using styled-components

Disclaimer: I'm no expert on Atomic CSS. I have just learned this pattern and excited to share my knowledge. If you want to deep dive in this topic please refer links in the resources section

In this post. I will try to make to introduce you with a CSS design pattern which is currently gaining popularity in the frontend community.
Also, I will be showing you how you can achieve this with styled-component in your react app.

What is Atomic CSS?

The definition according to css-tricks is

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

According to me, it's a functional way of writing CSS. Writing smallest possible utility and then composing it to achieve bigger components.

Mixins in Style-components

In order to compose styles in styled-components, we will be using mixin.
Let's look into a small example of a mixin.

const padding = props => (props.padding ? `padding: ${props.padding}px;` : "padding: 0px;");
const Box = styled.div`
  ${padding}
  background-color: red;
`;

then you can use this in your react components like this

 <Box padding={20}>Box</Box>

Now using mixins to achieve Atomic CSS

const padding = props =>
  ({ padding } ? `padding: ${props.padding}px;` : "padding: 0px;");
const bgr_blue = `background-color: #357edd;`
const br_20 = `border-radius: 20px;`

const Box = styled.div`
  ${padding}
  ${bgr_blue}
  ${br_20}
`;

Full Working Example

You can find full working codesandbox example here

Resources:

CSS-Tricks
Atomic CSS-in-JS
Styled-system

Twiliohackathon Project - COVID-19 - Social networking app

Avinash — Sat, 04 Apr 2020 10:54:53 +0000

COVID-19 Social Networking app for the people stuck in lockdown

What I want to build?
I will be building a social networking app through which users can communicate and help the people stuck in lockdown. Users can share and post how they are contributing and helping those how are in need.

Demo link
coming soon

Project Link
coming soon

How I built it (what's the stack? did I run into issues or discover something new along the way?
coming soon.

Additional Resources/Info
COVID-19 is a pandemic that has affected every aspect of lives across the globe. Many countries have announced a lockdown due which many are stuck in foreign countries and don't have enough resources.

Hackathon Home Page
https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8