Forem: freakomonk

setTimeout vs setImmediate vs Process.nextTick

freakomonk — Fri, 13 Oct 2023 19:49:31 +0000

Node provides us the setTimeout, setImmediate and Process.nextTick constructs, but do you know when to use what ?

To answer that, we need to understand the sequence of Node's event loop. Each stage in a run of event loop is called Phase. Each of the phases are then executed in a certain order.

These phases are

Timers - This phase executes the setTimeout and setInterval callbacks.
Pending callbacks - I/O callbacks that have been deferred to this loop run from the last loop run.
Poll - Looks for new I/O events to be executed. Also executes the callbacks for completed operations.
Check - Executes the setImmediate callbacks immediately after the poll phase. Important thing to note is - when the check phase has a setImmediate to be executed and poll phase is idle, the event loop immediately jumps to check phase without waiting for new I/O events to arrive.

Hence, it is fair to assume that setImmediate() will always execute before setTimeout(). There is a catch here however as demonstrated by below example

setTimeout(() => {
    console.log('Hello')
  }, 0)

setImmediate(() => {
    console.log('World')
  })

//Output 
Hello
World

When the setTimeout is passed a value 0, the order in which these two timers are executed is not guaranteed to be in sequence. Reason being a setTimeout with 0ms wait is immediately queued as an I/O event in poll phase, so poll phase might choose to execute setTimeout or move on to setImmediate in check phase if poll phase execution time is exhausted.

But when these two functions are included in a callback of a function, then the setImmediate is always executed first because the setTimeout is queued to be executed after the callback is returned.

What does `Process.nextTick` do ?

The core concept to understand the functioning of Process.nextTick is the Phase of event loop. As the name suggests, Process.nextTick executes the code passed to it before the start of next phase.

Process.nextTick is very useful when you want the code to finish executing before the callback is executed or handle the errors that are important.

Eg: Consider you are making multiple API calls and the response of the API 'A' is very important for you to check for the user login session. You want to parse this response before other responses so as to decide the user experience.

What you would do here is place the callback code of API 'A' in a Process.nextTick, so as soon as the API responds , the code is executed and user can handle that error immediately in same phase before event loop goes to execute the other callbacks.

Just to show the comparison between setTimeout() vs setImmediate() vs Process.nextTick

setTimeout(() => {
    console.log('Hello')
  }, 0)

setImmediate(() => {
    console.log('World')
  })

Process.nextTick(() => {
console.log('Dev.to')
})

//output
Dev.to
Hello
World

Being a good interviewer - How to perform on the other side of interview table

freakomonk — Thu, 20 May 2021 01:52:49 +0000

There have been plenty of resources discussing about giving interviews. It's time to discuss about conducting them.

Interview is a perfect opportunity for you/your company to make an impression with a potential hire. It serves as a sneak peek into the company's culture.

Here are a few things an interviewer should keep in mind before going for their next interview

Put efforts into the interview

Do you remember how nervous you were when you were interviewing for your current job ?

That's exactly what the current interviewee will be going through and even more.

Before everything else, if you are conducting a remote interview - SWITCH ON THE VIDEO. Have an eye contact at the candidate. It eases their nerves. Never switch off the video, candidate will never know if you are paying attention or fixing that production issue.

So, be empathetic and put efforts into making the candidate comfortable. Take a few minutes explaining about your company, your org, and your team.

Show interest in the candidate

Ask about the candidate, about his current roles and responsibilities. Show interest into what they do and take notes on how that can help the role they are interviewing for. This is also always mandatory, but a bonus.

Make some small talk, crack a joke or two.

Prepare for the interview

Prepare to conduct the interview as if you are the candidate. Have a list of questions ready, make sure you know the answer to all of them in depth. If those questions are open ended, you should be aware of all various solutions and their trade-offs.

Make sure your questions are following universal terminology and ensure the candidate is understanding the question perfectly.

Always, start the technical discussion stating your current tech stack. Candidate should know that you are technically qualified enough to conduct this interview, not just by the virtue of working for the company.

It's not a competition of wits

This is not a contest to decide who knows more tech stuff. If the roles are swapped, I am pretty sure the candidate can ask some pretty challenging questions as well.

Respect the experience and knowledge of the candidate. Your company needs good engineers more than they need a job. A tech interview should almost always be a discussion. Simulate the real life working scenario.

When was the last time you were assigned a task without any details and help offered ?

Ease into the technical discussion and drop hints at regular intervals whenever you see candidate stuck. Ask them to think aloud and assert them whenever they make good choices.

Every question you ask is a common task for both of you. There is no fun in asking a very tough question that requires a special insight. Like finding median in an infinite stream of integers. One doesn't come to optimal solution for such problems in a short time. If you are asking such questions, be prepared to nudge them to the right approach.

Avoid asking tricky questions or outputs of a code snippet. It shows absolute lack of preparation on part of the interviewer and is very detached from real world engineering. Be cognisant of the fact that we all use Google and Stack overflow in our every day job for simplest of the things. I have a friend who actually asks candidate to google and observes if they are good with finding solutions.

A good question is a small technical task which requires candidate to ponder over approach, decide a data structure and design an algorithm for it.

One of the brilliant questions I was asked a few years ago is " A Television manufacture firm want to calculate the number of black spots on their defective screens. Compute a solution to do this". This has no mention of a data structure or an algorithm. This will let candidate think over the problem agnostically. It's not nearly as much fun when you frame the same question as "Calculate the number of connected components in a forest".

Create an experience

It's the interviewer's responsibility to create a great experience to the interviewee. Even if you feel the candidate is not correct for the role, go ahead and make their time worthwhile. You never know who is going to be referred by the candidate next.

Make sure you discuss solutions with the candidate. They should leave the interview in a content state that they have actually learnt something in the last hour. This also helps as a proof that you know the answers, it's important you sell yourself as a qualified interviewer. A good interviewing experience is a very good indicator for a potential hire.

My current company, Fanatics, has an amazing interviewing culture and I so often listen from the new joinees that a major factor of their decision to join is the interview experience. Even I joined this company because I had a great interview with my current manager. The interview felt like I am part of the team already and we are brainstorming together.

I have seen plenty of times in my network where a candidate refused to join the company even after a good offer because they had bad interviewing experience. Do not be like this company.

It's as much learning opportunity for the interviewer as for the candidate, make sure you acknowledge if you have learnt anything.

This is all I had in mind, will make sure to expand this with further ideas. Do let me know what you think of these points. Happy to discuss.

JSON Web Tokens (JWTs) 101

freakomonk — Sun, 16 May 2021 13:27:12 +0000

JSON Web Tokens (JWT)

To understand the concept of JWT, we need to understand the authentication and authorisation.

Authentication
Authorisation
JWTs

Authentication

Authentication is a process in which a user is determined if he is exactly who he is claiming to be. For eg. a user "John Smith" requesting for his FB messages needs to be authenticated by the FB server that he is indeed John Smith, not someone impersonating him.

Username, password, OTP are common ways of authenticating a user.

Authorisation

John, say, needs to access messages of a group he is part of. Now server needs to verify if John is indeed an admin of the group and he is authorised to view the group's inbox.

Authorisation is the process of checking for the access privilege of the user. Server typically does this by verifying the user id against the roles mapped to it.

JSON Web Tokens

JWTs are used to handle both authentication and authorisation. Let us see how JWTs work before we dive into how it is used to ensure authentication and authorisation.

Like the name says, JWTs are JSON format based tokens used in the web. JWTs usually look like aaaaaaaa.bbbbbbb.ccccccc. Notice the . delimiter between sections. These three sections in a JWT are

Header
Payload
Signature respectively. Each section is in JSON format as specified above.

Header

A JWT header consists of two parts. The type of the token typ and the algorithm used to sign this token alg. This alg section contains an identifier for a hashing algorithm such as HMAC, SHA256 or RSA.

A typical header section looks like

{
    "typ": "JWT",
    "alg": "SHA256"
}

Payload

JWT's payload contains claims related to the token. Claims are basically statements about a specific section of data. Examples of claims in a JWT as issuer_name, creation_time, expiration_time etc.

The claims are represented by either reserved keywords or custom keywords. The advtange of a reserved keyword is for universal interoperability. As in, any receiver can make a reserved claim mandatory and sender would know what keyword would use without explicit agreement.

Examples of reserved claims are iss for issuer, exp for expiry date, sub for subject. A JWT can contain both reserved claims and custom claims.

{
    "iss": "server_identifier",
    "sub": "login_auth",
    "exp": "1621177091", // unix epoch for standardization,
    "user_id": "IN876TY34"
}

In this example, user_id is a custom claim.

Note: Both header and payload are Base64Url encoded.

Signature

Signature is what provides security to a JWT and prevents tampering of the data. Anyone can see the contents of a JWT payload if it is not encrypted, but any tampering will make the token invalid because tampering of the data changes the signature.

A signature of a JWT is created with the algorithm specified in the header section along with a secret, encoded sections of header and payload. Since signature is created based on the encoded payload, any changes in the payload will invalidate the signature.

Though attacker has access to encoded header, payload and algorithm from the JWT, he won't know the secret.

SHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

A JWT after creating these sections look like
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InNoYXNoYW5na2EiLCJwYXNzd29yZCI6IjEyMzQ1IiwiaWF0IjoxNTM2MjgwMjM1LCJleHAiOjE1MzYyODAyNjV9.iplar3jWiW8rh1gU1H6pYaPu6-njCfflrP8GLbx9Imw

Now that we have created a JWT, let us look into how it is used in authentication and authorisation.

How to use JWTs ?

JWTs are created during the authentication flow. Once the user logs in with username/password details, a JWT is generated by the server. This JWT is stored by client , usually in local storage, and is sent to server for each subsequent request as part of Authorisation header.

'Authorisation': 'Bearer <jwt>'

In the payload section of JWT, data related to the authentication and authorisation can be stored which is used by the server to authenticate the user and also verify the user's authorisation for various API access etc.

Example of creating JWT using Node.js

We use a npm package
npm install jsonwebtoken

const jwt = require('jsonwebtoken')

 const jwtSecretKey = '<JWT_SECRET_KEY_STORED_AS_ENVIRONMENT_VARIABLE>';
 const data = {
        "time": Date(),
        "iss": "server_identifier",
        "sub": "login_auth",
        "exp": "1621177091", 
        "user_id": "IN876TY34"
    }
   const token = jwt.sign(data, jwtSecretKey);

A JWT is not to be confused with a cookie. More discussion into this comparison will be subject of next post. A JWT is usually used to store and transmit authorisation data.

One downside of using a JWT is all the data is stored in it as claims. Since it is passed to server from client for every request, there is lot of data being transmitted over the network everytime and this only gets worse as more and more data is stored in a JWT.

To be a Full Stack Engineer in 2020

freakomonk — Sun, 19 Jul 2020 14:47:15 +0000

This is in follow up to the blog post I have written last year about being a Full Stack Engineer in 2019.

I have since joined an amazing company and picked up a few more skills on being a full stack engineer. I have tried to be as concise as possible, yet exhaustive is the skills to be learnt.

Starting from the front-end.

HTML, CSS

Well, nothing can be done on web without a basic understanding of HTML and CSS. Developers have long moved on from writing actual HTML, CSS with advent of UI libraries but still one should learn the basic building blocks of web.

Mozilla Developer Network is the best resource out there for anything related to web (mostly!). https://developer.mozilla.org/en-US/docs/Web/HTML
https://www.w3schools.com/html/
Freecodecamp offers might be the best learning roadmap for HTML, CSS out there is: https://www.freecodecamp.org/learn/

Javascript

Javascript is probably the most important skill a web developer or a full stack engineer can have just because of the varied applications of the language. It can be used on the browser and also server-side.

Freecodecamp track also covers Javascript, but my favorite way of learning JS would be to read @getify 's "You don't know JS" series. He even recently launches "You don't know JS yet" series.

React

Next we dive into the UI libraries that one must learn. There is a still debate on which is more popular React or Angular, but since more and more companies are adopting React, let's go with it.

Kent C Dodds has an excellent video tutorial for React Beginners on egghead.io

Also, its recommended to go through the Official docs for more advanced topics.

Redux/Mobx/Context/Recoil

State management is a major problem when designing component based web applications. Each one of Redux/Mobx/Context/Recoil solves the problem in their own way and having an idea on atleast one of them is imperative.

Redux : Getting Started with Redux
Mobx: Intro to Mobx
Context: This is natively supported state management in React - What is React Context
Recoil: What is Recoil

REST

We make tons of API calls daily and a majority of them are powered by REST. It only makes sense to understand the basic principles behind REST and the corresponding HTTP error codes.
Introduction to RESTful APIs

GraphQL

GraphQL is a latest contender for REST but has its own applications. Knowing when to use REST vs GraphQL is important for optimising the application performance.
Learn GraphQL
How to GraphQL

Node.js

Node.js is the server side runtime for JS which enables you to build APIs and host them using servers. Having to code in same language on both browser and server speeds up the developer velocity.
Intro to Node.js

Golang/Java

There are certain limitations to what a Nodejs application can achieve and so for such use-cases we use another OO language like Golang or Java. Java is the most popular one but Golang is fast rising

Java: Java Intro
Golang: A Tour of Go

Databases

There are two types of Databases, SQL and NoSQL. The differences between them both should be learnt and only then we can decide when to use which type of Database.

SQL: There are several popular SQL databases. We have Oracle, MySQL etc, but I will go with Postgres simply because of its rise and performance.
NoSQL: NoSQL databases are used when there is not many inter dependencies among your tables ( putting it very very simply, you should go read the differences ). Both MongoDB and Cassandra are good candidates.

Cache

More often that not, you end up using Cache to store data that is needed frequently from the database.

Again, noting down the popular ones: Redis & Memcached

Apart from this, a Full stack engineer should know the basics of Cloud ( Azure, AWS or Google Cloud) and Web design

There are a few options I deliberately skipped from this list such as Typescript and Deno etc to not confuse new engineers entering into the realm.

Let me know if you see anything amiss or you want to know about any particular tech.

Delete an element from a nested array in JS

freakomonk — Sun, 17 May 2020 01:12:14 +0000

Problem Statement: Delete an element from a nested array in Javascript

Let's discuss.

Deleting an element from a regular array is easy.

Option 1 (when you have a predicate) :

const newArray = oldArray.filter((element) => /*predicate*/)

Option 2 (when you have an index)

Either use filter with an additional index argument or make use of splice

oldArray.splice(indexToBeDeleted,1)

Now, how would you delete an element from a nested array in an object? Say this is your object structure


const blog = {
        title : "Hello World",
        post = [
            {
                title: "Article 1",
                references: [
                    {
                        url: "www.example.com",
                        author: "John Smith"
                    },
                    {
                        url: "www.example2.com",
                        author: "Kent Dodds"
                    },
                    {
                        url: "www.example3.com",
                        author: "Kyle Smith"
                    }
                ]
            }
        ]
    }

This is a typical example we all see everyday. Say the second reference for the first post is no more valid and it has to be deleted for it to be saved to DB.

Usually, the location of a nested element in an object is specified by its path. Here, for our second reference , the path is articles[0].references[1].

How to delete this ?

The native deleteoption in JS is not valid for arrays as it leaves behind an ugly undefined in the array, that is if you can traverse to that nested array. Also, when given a path you will have to write your own logic to traverse through the object.

Another good alternative is to use lodash. It comes with set& get methods which are just perfect for this usecase when used in conjunction.

We want to delete the element at articles[0].references[1] path from blog object .
Trick is to devide the above path into two parts

parentArrayPath : articles[0].references
childIndex : 1

const _ = require('lodash') (OR) import * as _ from 'lodash' // depending on where you are using this library

const refs = _.get(blog, parentArrayPath)
refs.splice(childIndex,1)
_.set(blog, parentArrayPath, refs)

Now, blog object will look like


const blog = {
        title : "Hello World",
        post = [
            {
                title: "Article 1",
                references: [
                    {
                        url: "www.example.com",
                        author: "John Smith"
                    },
                    {
                        url: "www.example3.com",
                        author: "Kyle Smith"
                    }
                ]
            }
        ]
    }

Do let me know if you have a better alternative. Happy to discuss.

Dynamic queries in GraphQL

freakomonk — Mon, 11 Nov 2019 12:13:03 +0000

A simple GraphQL query looks like this:

query myQuery() {
    user {
        age
        firstName
        lastName
        dob
       }
     }

Above query returns response of the format

data {
   user {
       age: 23,
       firstName: "John",
       lastName: "Smith",
       dob: "01-01-1970"
   }
 }

Well, this is pretty standard stuff. GraphQL endpoint returns the exact fields are requested.

Now, what if I want to query different fields every time ? For eg, I want to query { age, firstName } first time and then { age, dob } . I wouldn't want to fetch firstName in second case since I won't be needing it. This is a solid approach especially when an API call is involved with certain fields.

Usecases for this would be when

There is a checklist on the UI containing which data elements need to be fetched.
User selects his authorisation criteria and we want to fetch just that.

One way to do this would be to generate queries depending on the fields specified. But this gets pretty messy as soon as we introduce nested jsons.

To solve this, GraphQL has a very handy feature called directives. Very specifically, @include directive solves the problem of dynamic querying.

Now, we will rewrite the above query using @include directive.

query myQuery($age: Boolean!, $firstName: Boolean!, $lastName: Boolean!, $dob: Boolean!) {
       user {
       age @include(if: $age)
       firstName @include(if: $firstName)
       lastName @include(if: $lastName)
       dob @include(if: $dob)
       }
}

variables: 
 {
  age: true,
  firstName: true,
  lastName: false,
  dob: false
  }

The response of the above query would be:

data {
   user {
       age: 23,
       firstName: "John"
   }
 }

It returns just age and firstName since only those were set to true in the variables json. Another good thing about this @include directive is, GraphQL engine do not even execute the corresponding resolvers thus gaining us performance. Manipulating these variables json is very simple and the query will not need be mutated for every request. To get the values of dob instead of firstName, we just need to change firstName: false and dob: true in variables json.

Downside of using this directive is the queries turn out to be much more verbose and the need to repeat the variables at multiple places. But as explained here, it is an inherent part of GraphQL type safety.

Microservices vs Batch programs

freakomonk — Mon, 21 Oct 2019 06:20:38 +0000

Microservice	Batch program

Typically built to serve one usecase	Supports multiple tasks called jobs
APIs are built into a microservice	Batch should never contain APIs since the availability is not guaranteed
Hosted by a server framework eg., Netty, Django	Not hosted but executed periodically by a scheduler eg., cronjob
Have very high availability requirements	No requirement of availability. Executed when required
Interoperability with other microservices and batches might be desired	Should be interoperable with other microservices and batches
High resource intensive tasks are usually not handled by microservices to enable high availability	Designed for high resource intensive tasks

To be a Full Stack Engineer in 2019

freakomonk — Tue, 03 Sep 2019 17:07:11 +0000

Hi All

I will list down a few resources to help become a Full Stack Engineer in 2019.

I am here including the most popular tech stack of React, Redux, Node, GraphQL along with a few resources for system design.

In order to understand React, Redux, or Node in detail, its recommended to understand a little bit about Javascript.

Javascript: Picking up JS depends on your experience with it, but a very good starting point would be to start with fundamentals.

https://github.com/getify/You-Dont-Know-JS is a great place to start learning Javascript. It starts with the very basics and digs deeper into advanced concepts. In addition, it also covers the internals of JS compiler.

React: Official React docs do a pretty impressive job of explaining this library. https://reactjs.org/

Tutorial included in the official site (https://reactjs.org/tutorial/tutorial.html) is more than sufficient to get hold of all basic stuff. To top that, Kent C. Dodds' course on egghead is an amazing course to cover the breadth of React. https://egghead.io/courses/the-beginner-s-guide-to-react

Redux: Before starting with Redux or for any library for that matter, its useful to understand the need behind it. Reasons to use Redux are nicely explained in this article: https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/ .

To learn more about it, official docs are a good source https://redux.js.org/introduction/getting-started .

Node: Node is the most popular JS framework to build server-side application and it has a very un-intuitive single threaded architecture. Node architecture can be studied from this doc: https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/

Proper understanding of the Node architecture is needed to build scalable and asynchronous applications.

GraphQL: GraphQL is the latest tech on rise and it makes sense to learn it. GraphQL helps in building optimized data communication APIs for web applications.

Design:

This is an amazing series where Google explains the browser architecture : https://developers.google.com/web/updates/2018/09/inside-browser-part1
https://www.interviewbit.com/courses/system-design/
https://leetcode.com/ is also a good place to practice coding in JS.