DEV Community: Dhilip kumar

The Spooky tracker

Dhilip kumar — Sat, 07 Aug 2021 13:37:20 +0000

The Spooky tracker

Hey there!

Have you ever wondered,

"Damn how does this website know what did I shop/search/view?"

yeah you are not alone.

Cookies

"An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser. The browser may store it and send it back with later requests to the same server."

The HTTP calls are stateless. Say if you want to inform who the logged in user is to the server, the cookie is the preferred way to go which gets set and sent in every request. And this is just one application for which cookies were created but they have been used for more than just retaining the logged in user's information.

In the above case, the cookie are set by the same domain in which the user is logged in, and these are called as 1st party cookies.These are essential cookies for the website to function smoothly.

More about cookies:

Cookies are sent along with every request from the domain in the request header once set.
We can even have a cookie which can't be read by javascript but gets attached to every request httponly flag.
Each cookie can have its own expiry. (Expiry on client)
It is possible to restrict the cookie sent to Cross Origin with the help of same-site property (more about this later)

Enough, tell me how do they track already!

Enter 3rd party cookies:

Third party cookies are cookies that are not set by the domain that you are in, but by another domain. And these third party cookies are responsible for providing us with the "PERSONALISED" content aka "the spooky how does it know what I like cookie".

Let's go over a scenario:

Say you are searching for answer for "how to centre a div" in www.stackoverflow.com, you'll notice that the other 3rd party domains such as facebook.com, yahoo.com, youtube.com, linkedin.com also bakes their cookie into the browser while you are still in stackoverflow. This could be as simple as stackoverflow trying to provide the user with the ability to sign the user in with the help of a small banner with embedded login buttons provided by these other domains.

Or it might want to show some ads from these domains etc.

Now, when you are done looking for your answers and you move on and fix the issue with CSS. Now, these other third party domains will have knowledge that your css skill is not so great.

Just kidding, but they know that you are some one who might be interested in CSS.

Once you are done with your work and want to surf a bit on facebook to check what your friends are upto / memes. Now you will log yourself into facebook and now when you do so, the cookie set by facebook while you were in stackoverflow will also gets attached to the request. So the fb server now says, "okay you were the one who was searching for centering the div, let me do you a favour by pitching you some of the good books/ udemy courses to read more about CSS" and voila there you have the ads, the TARGETED, PERSONAL ads in the feed.

The same scene will apply to multiple other websites that uses google ads, as the cookie is already set in stackoverflow for google.com, when you go to any website which uses google ads, these cookie will automatically gets shared with google.com requests and when the advertisement banner loads it would be totally targeting your interests to gain the click.

You don't want this to happen?

Then please don't be in a hurry to blindly click on this "Agree" button on the annoying banner on most websites.

GDPR:
"The General Data Protection Regulation is a regulation in EU law on data protection and privacy in the European Union (EU) and the European Economic Area that aim to enhance individuals' control and rights over their personal data." - Wikipedia

With the introduction of GDPR, the websites had a mandate to show the users why each cookies are needed to be set and what purpose do they serve and also provides the user with an option to opt out of it if you don't need. So you might be tilted towards thinking,

"let me disable third party cookies in the website altogether for all websites and then I should be out of this tracking hell!"

Sure you can do that but still... you can be tracked. Find out how in my next blog.
Signing off for now.

Software Engineer 2 UI Interview at Microsoft

Dhilip kumar — Sat, 17 Oct 2020 07:55:08 +0000

Hello there,

For those who don't know me, do check out my website and my other blogs.

I recently accepted Microsoft's offer for Software Engineer II at IDC, Bangalore. I realized a blog about this might help a few :)

In this post, I'll take you through my preparation, strategies, interview rounds, and things to look out for in each round. This will be in a Q&A format.

Disclaimer:
The following incidents are completely based on my view and what I have observed from my experience and it might vary from one individual to the other.

Firstly, why do I have to write this in a blog?

When I got called for the interviews, I was searching all over the Internet to find out how interviews are done for the Frontend domain in Microsoft. I found very less content. And I had to go for the interview without any knowledge about rounds. So I thought of letting others know more about the rounds so that they are prepared.
When I posted my Job switch news on LinkedIn, surprisingly I got numerous chat requests where people asked me about my preparation and my interview experience.

How did I apply?

I had my profile listed in Instahyre, a famous job search portal in India, with the Actively looking for opportunities option enabled. One evening, I got a call from a person (working in a third-party headhunting firm on behalf of Microsoft) asking if I am interested in the role. And it began...

How did I Prepare?

I was attending a few other interviews prior to the above interview call. So when I got the call I was almost in a good position to attend the interview. As it was for the Frontend Engineer role I brushed up on JS basics, Web Performances, my current projects, and Leetcode. I did about 240+ Leetcode Questions by the time I gave the Interview. (It might just be 0 for someone :P). I highly advise anyone attending FE interview at Microsoft or any top MNCs(Amazon, Google,...) and many other top Startups(Rubrik, Flipkart,...) to have enough knowledge on Data Structures and Algorithm. There is no escaping from DS & Algo as it is considered heavily to rate your problem-solving skills. Attaching my leetcode profile here for reference. Feel free to follow.

Resources for Frontend?

Javascript from W3 Schools, techsith tutorials, You Don't Know JS
React from udemy.
Web Fundamentals & performances
Latest technology updates from Twitter.

Do I get to know which team I am being hired before giving the interview?

If you are part of a massive Interview Drive, you will have to wait until you meet your potential Hiring Manager(sometimes even the one taking your Managerial Round won't be your actual HM). However, you might get to know the product in which you will be working on before the interview(Azure, Office365, etc).

How do I know which Level I am being hired for?

From what I have observed and read about, Microsoft does not assign you a Level based on your years of experience. I have seen a lot of posts in blind, leetcode, etc where 8YOE are given L61 and 4YOE are given L62. So, it all boils down to how well you performed in your interview.

Okay enough, tell me about the rounds already!

Due to COVID-19, all interviews happened virtually through Microsoft Teams.

Round 1 (Machine Coding): (2 hours)

As a Frontend Engineer, I was expected to start with a machine coding round where I was given a problem statement which I have to complete in 2 hours. If you have any doubts regarding the problem you can ask the interviewer. You might be given a zip containing initial boilerplate.

Example Questions:



 - Design an Email Client like MS Outlook.
 - Create a chat interface like MS teams.
 - Create a Notification interface like MS teams.

Things to look out for:

Don't jump to writing answers unless you understand the question thoroughly.
There could be few jargons which could be part of your question, make sure you ask clarifying questions and don't assume anything :)
Write Semantic HTML with proper tagging (Don't make everything a div)!!! Important
Know the tradeoffs, if you have to dynamically create a complex DOM tree, using JS APIs like document.createElement() then it would consume a hell lot of time. So think if that suits you or you should go with innerHTML approach.
Understand flexbox or grid as they will come in handy in creating a responsive layout.
Try using the latest ES6, ES2020 concepts, it is a platform to show that you are aware of the latest updates.
Incrementally build your application and make sure to submit the working code :P

Round 2 (Javascript): (1 hour)

Here I was evaluated on my Javascript knowledge.

For the first 10 minutes, from the code that I wrote earlier in my machine coding round, I was asked to discuss the following:

Why did I choose a particular approach?
What other alternatives are there?
What are the tradeoffs I chose to complete the problem at a specified time?
If I were to get more time, what would I do better?

Review your code and prepare for these questions before you enter the next round.

After this, it was full-on javascript questions, where I was asked to write a polyfill for some js APIs introduced in ES6 or ES2020. For me, it was to write a Promise polyfill.

Adding to the above question I was asked to implement the following.



Promise based memoization with a given cache size behaving
as an LRU cache with an expiry time and auto cache burst

Here I was grilled on my JS knowledge on async, promises, higher-order components, etc.

Round 3 (Design / HLD + LLD /): (1 hour)

In this round I was asked to design a ChessBoard, as I don't know how to play chess😅😅, I told the interviewer and he modified the question to,



Design Snakes and ladders game

I was asked to write the Classes and methods involved in each one of them. Not expected to run it in the console. It happened over the VS code editor.

Expectations on this round were:

How good am I in identifying the Top-level classes and if I am able to breakdown the tasks into small meaningful chunks.
What is the overall Data structure that I am using to store the data?
How readable is the code?
Am I good at identifying the corner cases?
How scalable the architecture I used will be?

Round 4 (PSDS) : (1 hour)

This is a problem-solving round. To evaluate my Problem-solving skills and how quickly am I able to achieve an optimized solution.

Here I was asked 2 questions:

Find the starting and ending indices of all repeated characters from a string.



const input =“hellooooloo”;
const op = getRepeated(input);
console.log(op) // [(2,3), (4,7), (9,10)]

The next problem is a String Backtracking approach, an extension of the previous one, where I have to check if I can form a word in the dictionary by removing one or more repeated letters.



const dictionary = {
    'hellolo': true
};
const input = “hellooooloo”;
const op = canBeFormed(input);
console.log(op) // true,
// because by deleting the repeated characters of `o` we can form `hellolo` which is present in the dictionary

Round 5 (Hiring Manager): (typically 45 mins - 1 hour)

I was asked questions on multiple fronts like Javascript, performances, and Problem-solving. It was like a combination of all the above rounds.

I was given a snippet in JS and asked about its output and how does it work under the hood. (Macro and micro queues related).
What are the strategies that I follow to increase the speed of any website?
Web vitals and how they are measured?
Browser Execution of Document.
Problem: Space Separator, another string based backtracking question.




const dict = {
 hi: true
 hello: true,
 world: true
};

const str = spaceSeparator('helloworld'); // "hello world"
const str2 = spaceSeparator('helloworldhi'); // "hello world hi"
const str2 = spaceSeparator('helloworldh'); // "" , as h is not present in dict we throw "" as output

The code I wrote here for the problem was asked to run on the browser console after completion, to verify its correctness.

Round 6 (As Appropriate): (1 hour)

This is the final round and it is important to get a hire in this round too. It is not a gimmick, as I have read posts where people got rejected in this round.

Here I interacted with an Interviewer who was at a GM/Partner level in Microsoft. This round could be as simple as knowing about your interests and your past project to Complex Data structures. And for me its the latter :P

It started slowly with an introduction and my background and landed on a data structure question. I was asked to write the following program.

This was an interesting problem and I encountered this for the first time in this interview.



Consider you are getting millions of tweets per second,
you have to alert whenever a particular word is repeated 
billion times in any 1 hour time frame (moving window)

I had to decide the Data structure for each tweet.
I had to decide how I want to store it in my memory.
I had to come up with an optimal solution.

What Next?

Now you wait!!!

Microsoft has a lot of applicants for each role, so before they confirm that you are selected they do make sure they have evaluated other candidates who might be a better fit. So, you will have to wait for them to come back.

It took me 2 weeks to know that I was selected. And releasing the offer took another week. And you will have 5 days to accept the offer.

Overall I would say the entire journey was smooth and I'll be part of MicrosoftTeams Development. An enterprise chat application used by millions of people.

So excited!!!! Wish me luck!!!🤩 🥳

Don't forget to follow me!😄

If you have more questions add it over the comments section I'll try giving the input if I know the answers😛

My Website, blogs, and Twitter

That's all Folks!!!

A Node Email Service using AWS lambda

Dhilip kumar — Sat, 03 Oct 2020 06:50:45 +0000

Hello there,

It is always so rewarding when you achieve something after long research. And this is one such instance as I had to at least read 40+ blogs to finally set up a fully running Mailing service. So just thought of collating everything together in a blog to help lambda newbies like me.

Prerequisites:

Javascript
A Gmail account

The Problem:

Having Contact Me like the one below is an integral part of most of the personal and small business websites that are built.

I was building one such website, as the entire website is static, I honestly do not want to set up a server just to expose a single endpoint.

The solution:

I know that cloud functions are something that solves my problem of having an endpoint without actually setting up the server. I chose AWS Lambda as it was much popular. But, the resources and blogs were not enough to give me a step by step guideline.

What are we building?

We are going to build a node emailer service that accepts a message in our POST request body and triggers an email to the predefined set of recipients from your Gmail account.

1.AWS Account Setup
2.Setting up Lambda
3.Uploading the emailer code to your lambda
4.Google Oauth and GCP Setup
5.Update the keys in your Code
6.Creating AWS API Gateway

1.AWS Account Setup:

Create an AWS account here. Your account setup will be complete with you entering your Credit card details and verifying your email. Charges are usage-based.

2.Setting up Lambda:

Naviagte to AWS Console
Choose Lambda under the Find Services input field.
You should now be on the lambda functions dashboard which shows the list of your available lambda functions.
Click on the Create Function button
In the next screen, fill in your Function name - emailer and choose Nodejs runtime as we are implementing this using node.
On Clicking the Create function button you should see Successfully created the function emailer message on the next screen.
On scrolling down the page, you will see a sample nodeJS code with index.js
Create a new test with any name of your choice and click on the Test button, you should be getting the response in the Execution Result tab.

3.Uploading the emailer code to your lambda:

The Aws lambda IDE for nodeJS does not allow us to install our npm packages on the go. Due to this, we have to get this set up locally in our machine and then upload the code to lambda by zipping it.

Download the Zip. It contains the code to be uploaded to your lambda function.
If you want to create the zip, the content is present inside this repo where there are a nodemailer dependency and some code to send an email. Make sure to npm install and create a zip from the root directory including your node_modules folder.
Once you got the Zip, upload it to the AWS lambda using Actions -> Upload a .zip file option.

If you open index.js you should be able to see the code where we have given our Email credentials and sending an email.
Headers are set to handle CORS errors if you try hitting your lambda from another origin.

4. Google Oauth and GCP Setup:

You need to set the following auth keys in order to confirm that you are the owner of your email account.

{
    clientId: '<YOUR_CLIENT_ID>',
    clientSecret: '<YOUR_CLIENT_SECRET>',
    refreshToken: '<YOUR_REFRESH_TOKEN>',
    accessToken: '<YOUR_ACCESS_TOKEN>'
}

In order to do that this we need to get our Oauth credentials from our GCP project and then use that in Google OAuth playground to generate these keys against your email.

I know it could be a lot of jargon. But trust me it is simple.

Setting up GCP:

So login to Google Cloud and create a new project.
Click on Select Project and then Create new project button.
Name it mailer and click on create.
In your mailer project goto APIs & Services -> Credentials -> Create Credentials -> OAuth Client ID -> Configure Content Screen -> External -> Create
Again goto Create Credentials -> OAuth Client ID -> Web Application -> Enter Application Name -> Choose https://developers.google.com/oauthplayground as Authorised redirect URIs and Save it.
Now you should be getting a popup with your clientID and clientSecret copy both.

Setting up OAUTH:

Navigate to Google OAuth Playground
Click on Setting icon on the top right corner -> Enable Use your own OAuth credentials > Enter OAuth clientID & Oatuh clientSecret that you got from the above steps -> Close.
In Select & Authorize APIs Field, Type https://mail.google.com -> Authorize APIs -> Login with the account that you want to send email from.
Click on Exchange authorization code for tokens -> Copy Refresh Token and Access Token.

5. Update the keys in your Code:

Now we got all the keys needed.
Now update your clientId, clientSecret, refreshToken, and accessToken and your Full email ID in the AWS Lambda code.

Click Deploy -> Test -> Configure your test to include message parameter.
You should get an email with your message on clicking Test.

6. Creating AWS API Gateway:

Create an API to expose this lambda function as a service.
Click on Services -> API gateway service from the search bar -> Create API -> REST API -> Build -> API name -> Create.
You should be on this screen now.

We need two methods to be created. 1.POST and 2.OPTIONS to handle CORS.

Creating POST:

Actions -> Create Method -> POST -> TICK -> Integration type -> Lambda -> Lambda Function -> emailer -> Save -> OK.
We need to allow few Headers so that they could be read by the client.
Method Response -> Expand the Accordion next to 200.

Add the following headers


    Access-Control-Allow-Headers
    Access-Control-Allow-Methods
    Access-Control-Allow-Origin

Go to Integration Response -> Expand Accordion -> Header Mappings -> Make the following


Access-Control-Allow-Origin : '<YOUR_DOMAIN>'

If you have multiple headers being passed from your API, in order to consume them you have to enable it here.
You can now do a test from the TEST option -> pass the following in the body


{
    "message": "HELLO"
}

Click on Test -> you should get an Email with "HELLO" in the Message
Actions -> Deploy API -> Deployment Stage (New Stage) -> Dev as Stage Name -> Deploy.
Your POST API is Now deployed.
Copy the INVOKE URL
POST call this INVOKE URL with message param in body to send the email.

Similarly, create the OPTIONS method, and update the headers. You should get an 'OK' response to testing the Same.
It is mandatory otherwise your Cross-site requests will fail.

Now do this


fetch(INVOKE URL, {
    method: 'POST',
    body: JSON.stringify({ message: 'hi'})
}).
then(res => res.json()).
then(res => console.log(res)); // {"message":"Email processed succesfully!"}

You have Done it!

Don't forget to follow me 😄

My Website, blogs and Twitter

Thats all Folks!!!

Real life Web Optimizations

Dhilip kumar — Fri, 27 Mar 2020 13:10:25 +0000

Optimising Goibibo Trains

Hello Fellow Devs,

Goibibo is one of the top Online Travel Agent companies for booking tickets Online for Flights, Trains, Hotels, Buses and Cars in India. In this I am gonna take you through the problems that we had with existing implementation of goibibo trains and how we resolved it. Basically the journey of re-building goibibo trains vertical from scratch.

Our Trains Funnel has 3 Main Pages:

	Page Name	Purpose
1	Home	To feed in Source, destination and date for travel
2	Results	To see the available trains List
3	Review	To avail offers and provide traveller details

Payment is handled by different independent Module.

Problems we had:

1.Feature Parity:

Although our API provided a lot of information, they were not consumed at the Client. Due to this there was no parity in features between Mobile apps and Web Apps which led to much plain UI with no option event to filter items for example.

2.Hard to Read/Edit Existing Code:

For someone who came into redux-saga from redux for global state management, it was still hard to wrap my head around the concept of how redux-saga's generators work and how internally they are coupled with watchers. Every time I touch the code on saga I had to be extra careful also it uses local storage to maintain store.

3.No Shareable URL(Review Page):

Our Review page's URL is static (/trains/booking) which makes it impossible to share it across to someone else on the web. Because it was built with (Android/IOS) APP first approach.

4.Better User Experience**

Sometimes users were not sure about what the mandatory Info they were missing to proceed further because of lack of appropriate messages.

5.Size:

So the Elephant in the room was the JS bundle Size. Our vertical was a Single Page Application and as you know we ended up downloading all javascript content up front on page 1 for the rest of the two pages as well. So the Initial sizes were as below:

JS:

	File Name	Size	Compression
1	`vendor.js`	144KB	Brotli
2	`bundle.js`	46KB	Brotli
3	`review.js`	14.4KB	Brotli
	`total`	204.4KB

JS browser Info

CSS:

	File Name	Size	Compression
1	`combinedStyles.css`	22.8KB	gZip
2	other Css Files	27.3KB	gZip
	`total`	50.1KB

CSS browser Info

This resulted in a considerable amount of users dropping off from our funnel without getting the javascript downloaded.

Steps taken to resolve all the issues listed above:

1.Feature Parity:

Since a lot of Information are already available in the API and just not Integrated, we went ahead with providing Feature Parity to the Existing Dweb of trains with (Offers Carousel, Filters, Best Available Class, Alternate Train Route, Smart Engage, Offers).With this our Average daily booking jumped from 200-300 to 600-700 on a daily basis.

2.Rewrite Train in a Better lightweight framework

We had to get React out of the picture because just to show a hello World we'll end up sending around 40KB to the Client.

(react - 2.6KB and react-dom - 36KB)

Our Rewrite framework Options:

a.No Framework:

Maintaining an e-commerce website in plain JS has its own Pain Points with everyone coding in their own way (functional, object oriented, Es6) which ends up having no uniform way of writing the code. Also updating the DOM won't be as optimised as compared to frameworks like (react).

b.Svelte:

We were right on the current trends and noticed about Svelte and its ability to send compiled code as output. So, we ended up doing a POC on Svelte for our Search component in Home page and we found that the total amount of code that is shipped to the client is less than 10KB for the Search Widget which in turn is 45+KB in react.

c.Preact:

preact[3KB] is a lightweight react as they call it and it also has support for Hooks with preactX release. So a POC that ended up with size a little higher(2KB) than Svelte.

Final Verdict:

Since 'Preact' and 'Svelte' were so close to our requirement of achieving lightest client bundle, we decided to choose between these two frameworks.

	Metrics	`preact`	`svelte`
1	Size	~4.5KB (with Hooks)	Although it compiles the code to plain js, it adds a small amount of Svelte framework specific code (~2KB)
2	Community	Better than Svelte	Relatively new and Growing
3	Package Availability	All `react` and `preact` Frameworks are supported in `preact`	Not much option in terms of package availability
4	Skillset of Developers	Abundance	Need time to get into Svelte Ecosystem
5	BoilerPlate	Comparatively More Boilerplate	Lesser Boiler Plate with the help of 2 way Binding

Note: These were the data at the Time of deciding framework

With all those comparisons we decided on going with 'preact' as it is not much of size difference when compared with svelte and the community and packages availability are too good.

Enter groot

groot - our new repo.

Motto of `groot`:

1.Lightweight:

Our key metric was to serve the entire Funnel in Under 100KB.(All 3 pages included)

2.MPA:

We decided on following the Multi Page Application Approach as the extra byte of code to download on each page transition could go to a maximum of only 20KB.The other resources which are common like vendor.js are served from service workers for each page except for the first time.

3.Server Side Rendered:

Like any other vertical in goibibo, trains will be Server Side Rendered for providing the User with Meaningful First Paint as well as helping in SEO Indexing.

4.IsoMorphic:

The content will be Server Side Rendered with the same page being used in the funnel as well as for the SEO pages.(This ensures feature parity and avoids multiple team handling multiple versions of the same page).

5.Packages:

Do not add packages unless it is absolutely needed. Always prefer native solution.

6.State Management:

We decided on leveraging the built-in useReducer hook combined with useContext to serve as global State management for our Application.And this helps us reducing the need for yet another third part library like redux.

7.No Axios:

We have decided on not using Axios as it contributes to (4.4KB gzip) and to use fetch instead. However we used node-fetch for fetching on the server.

Our client had only the following content in our vendor.

  "dependencies": {
    "preact": "10.0.0",                          
    "react-foco": "^1.3.1",                     
    "siema": "1.5.1",
    // Other Server dependencies     
  }

Very Little Client Dependencies? Oh yes!

App Architecture:

Getting our First Page out:

Irctc forgot password

We began with preact's scaffold as it has optimised webpack build.
But it always appended the whole preact component to the FirstChild of the body, but we needed goibibo header which is a plain JS component to be the first child.
We could not export the webpack's config out of the scaffold so we wrote our webpack config from scratch which gave more control in terms of build outputs.

The CSS Problem:

We got our designs and implemented the functionality.When it was time to take the release out we noticed that our CSS for that page is about 26KB because we used a generic css file known as combinedStyles.css which has a lot of CSS rules that are shared between all verticals but most of them were not used in our particular page.

`purify-css` to the rescue:

This library creates a new file which contains css rules only for those classes that are used in our code base.

So I created a new webpack plugin out of purify Css.

   plugins: [
        new OptimizeCssPlugin(
          [
            {
              files: ['./src/*/*.js', './src/*/*/*.js', './server/*.js', './server/*/*.js', './server/*/*/*.js', './plain_js/*.js'],
              cssPath: `https://goibibo.ibcdn.com/styleguide/css/newtrains/trainCombined.${Math.ceil(Math.random()*1000)}.css`,
              downloadCssPath: `./static/trains-static/styles/combinedStyles.css`,
              outputCssPath: `./static/trains-static/styles/purified.css`
            }
          ]
        )
     ]
// other configs

	Property	Purpose
1	`files`	js/css/html files to consider in my repository
2	`cssPath`	The giant file with all CSS rules
3	`downloadCssPath`	If the `cssPath` file is in the remote server, then `downloadCssPath` is where it will get downloaded.
4	`outputCssPath`	It is the location of the final output CSS file which takes the CSS rules from `cssPath` file for the classes mentioned in files provided under `files`

This worked out ultimately and resulted in reducing the size of the combinedStyles.css from 23KB to ~7KB.

Finally, with the success in that we also involved in serving the content in brotli compression rather than gzip which also helped us in reducing the resource size. We did have our Fallback to gzip for the user agents that do not support br compression.

	File Name	gzip	brotli
1	`vendor.js`	17.7KB	15.7KB
2	`forgotPassword.js`	14.3KB	12.3KB
	`total`	32KB	28KB

Forgot Password is the first page that we built and is live with a pretty good LightHouse Score of 91.

Post that we released multiple URLs which are relatively New.

As the results were Satisfactory for the pages outside the main funnel, we moved one of the pages inside our funnel to be served from groot.

The REVIEW Page:

Review page is the first in the funnel page we decided to rewrite in groot.

This involved,

Considerable changes in the Backend API to support page refresh and other train specific use cases as to show offer, updated fare breakup etc.
Design changes
Additional features
Responsive
Better UI Error handling

Since we wanted to provide the Server rendered Meaningful response on review landing rather than a loading shimmer,

We hit the Backend API from our Node Server in groot
Updated our Store
Server rendered our Component
Attached Additional scripts, css required to the final HTML Doc
Hydrated on Client on receiving Response.

And we were able to see considerable improvement in terms of performance.

Page Drop offs:

People who saw our Server Rendered First Paint but could not get the JS loading.

In our Old Page for Every 100 users almost 8 of them could not get the JS loaded due to which our page appears non-interactive to them.
The same got down by 5 percent to 3 for 100 in our New page. Which again is more than 50% reduction in our Page Dropoffs.

Review Page Comparison:

	`Metric`	`Old Version`	`New Version`	`Diff`
1	JS Vendor Size	144KB	16KB	~85% Reduction
2	JS Main Bundle Size	60.4KB	19.5KB	~67% Reduction
3	CSS Size	50.1KB	11KB	~78% Reduction
4	LightHouse Score	64	94	^30 Points
5	Page DropOffs	8.8%	3.3%	~62% reduction

Well!!!

Since Common assets are cached by service worker, moving from one page to the other will download only the page specific js file from the server.

Sincere thanks to @Raghunandan for helping me with his brilliant ideas and providing me with different perspectives to solve the problem. Thanks to @Abhigyaa for the Axios to fetch Migration

Happy Coding!!!

Don't forget to follow me 😄

My Website, blogs and Twitter

Thats all Folks!!!

Creating JSON.superStringify()

Dhilip kumar — Sun, 22 Mar 2020 06:42:06 +0000

Hello Devs,

I recently came across an interesting problem, where I was asked to write a JSON.superStringify() which avoids repetition if (key, value) are same.

Let me get you the picture:

let us assume that there is an object like below,

const baz = {
  foo: 'foo',
  bar: {}
};

Then, the output of the same should be a serialised string with no repetition if (key, value) are same for the object property.
Here 'foo' is the key and value for baz object. So instead of duplicating it we create it only once.

Expected Output:

const baz = {
  foo: 'foo',
  bar: {}
};

JSON.stringify(baz); // "{"foo":"foo","bar":{}}"
JSON.superStringify(baz); // "{"foo","bar":{}}"

Now you should be able to understand the problem. It avoids unnecessary payload that is being sent over the network.However, we need our own JSON.superParse() to make it parse in the right manner.

Assumptions:

For keeping the solution Simple,

We are not going to worry about cases where the inputs are undefined, null, Symbol, WeakMaps and WeakSets.(However they are just a typecheck away)
No second or third Parameter for JSON.superStringify()

Approach:

Let us list down the (key, value) possibilities.
The Inputs can be,

A string
A number
A boolean
An array(of type object),
An object(of type object)

How do we tackle each of them?

A string's output will have quotes("") attached to it in the Stringified output.
A number's output is just string converted.
A boolean's output again is just string converted.
An Array can hold any of the above types and it has to be iterated and then [] should be added to the output.
An Object can have all the above as its value, and all its properties has to be stringified and {} should be added at the end.

Now, we know how to tackle the problem let's put out verbal steps.

Step 1: Any keys apart from type Object should be converted to string.
Step 2: For all the values which are Objects,
- Handle Array, it should repeat steps 1 and 2
- Handle objects, it should repeat steps 1 and 2.
Step 3: Return the output string.

It is clear from our verbal steps that the Array and the Objects have repetitions of above steps which results in having recursion.

Let's get coding.

Step 1: Let us handle all cases except Object type

JSON.superStringify = function(input) {
    // Handling Other types except Object
    function handleOtherTypes(val) {
        if (typeof(val) === 'string') {
            return `"${val}"`;
        }
        return `${val.toString()}`;
    }
    return handleOtherTypes(input);
}

When it is a string type then add quotes "" or just convert it to string and return the output.

OUTPUT:

    JSON.superStringify(1); // "1"
    JSON.superStringify("hello"); // ""hello""
    JSON.superStringify(true); // "true"

Step 2: Including Arrays:

JSON.superStringify = function(input) {
    // Array
    if (Array.isArray(input)) {
        const output = input.map((val) => {
          return this.superStringify(val); 
        });
        return `[${output.join(',')}]`;
    }
    // ... code for handling Other types
    return handleOtherTypes(input);
}

If it is an Array

Add Square bracket at the End [].
We need to stringify each of the contents inside the Array.
Since each of them can be of any type (Number, string, boolean or array), for each value of an array we recall our superStringify function recursively and store the result in an array (output) through map.
- Finally, we move ahead with joining the output Array with comma.

OUTPUT:

JSON.superStringify([1,2,'444', true]); // "[1,2,"444","true"]"

Step 3: Including Objects:

After Each key and value pair there should be a comma(,) which acts as a delimiter in case of objects.
So let's try utilizing join() utility of an Array to create delimiter.
Which means we will put each stringified (key, value) pair inside an array and finally join them.

Since we always update the existing array as and when new (key, value) properties are stringified, we could go with Array.reduce()

JSON.superStringify = function(input) {
    // ... array handling code
    // Object Handling
    if (typeof(input) === 'object') {
        const keysList = Object.keys(input);
        const superStringified = keysList.reduce((acc, key) => {
            const value = input[key];
            // case 1
            if (key === value) {
                acc.push(`"${key}"`);
                return acc;
            }
            // case 2
            if (typeof(value) === 'object') {
                 acc.push(`"${key}":${this.superStringify(value)}`);
                 return acc;
            }
            // case 3
            acc.push(`"${key}":${handleOtherTypes(value)}`);
            return acc;
        }, []);

        return '{' + superStringified.join(',') + '}';
    }
    // ... other types handling code
}

We have 3 main cases:

case 1: If both key and value are the same we are going to add only key with quotes around it to avoid duplication.

case 2: If the value is object it could be either array or object which we have already handled in our function so we call superStringify recursively.

case 3: If it is not in case 1 or 2 then handleOtherTypes should produce output for our different types.

OUTPUT:

const input = {a: [1,2,'444', true], "b": 4, c:"c"};

JSON.superStringify(input); // "{"a":[1,2,"444","true"],"b":4,"c"}"

Oh yeah we have created our superStringify serializer.

Full working demo is here at codesandbox

Next Steps? Write your own JSON.superParser() which handles output from superStringify :P

Happy Coding!!!

Don't forget to follow me 😄

My Website, blogs and Twitter

Thats all Folks!!!

Understanding `this` with E.D.I.N concepts

Dhilip kumar — Sun, 17 Nov 2019 08:26:40 +0000

What is `this` in javascript?

this keyword refers to an object, the object that is executing the current part of our Javascript code.

Why is it so complicated to understand?

We might feel overwhelmed as there are quite a number of ways to manipulate this by providing it a different context.

this binding has nothing to do with where a function is declared but it has everything to do with how a function is invoked.

There are 4 main Rules which we can make use of, to determine what this in your code represents.

E.D.I.N - Stands for Explicit binding, Default binding, Implicit binding and new Binding.
(There is no EDIN concept, its just my way to remember these concepts)

Rule 1.Implicit Binding:

Implicit Binding is achieved when the function that is executed is called with a context.

Example:


const obj = {
    name: 'Dev',
    getName : function() {
        console.log(this.name);
    }
}

obj.getName(); // Dev

`obj.getName()`

Here we call the getName() function of the object obj with obj as the context.
Since obj has name property, this.name would give out dev as the output.

What if your function is nested within objects?

Example:


const obj = {
    name: 'Dev Child',
    getName : function() {
        console.log(this.name);
    }
}

const parentObj = {
    childObj: obj,
    name: 'Dev Parent'
};

parentObj.childObj.getName(); // Dev Child

The last level parent before any function call is the context for that function.
In our case obj is the this for getName() function.

The `Fat Arrow` function catch:

var name = 'Global Dev';
const obj = {
    name: 'Local Dev',
    getName : () => {
        console.log(this.name);
    }
};

obj.getName() // Global Dev 😈 😈 😈

The problem here is this binding has been done for the getName arrow function and it takes Lexical this which is Gloabl in this case.
So calling the function with impicit binding takes lesser priority than Arrow function.

2.Default Binding:

Default binding is whenever the function is called without any context.
A common mistake occurs while destructuring a function from an object which has this context in it.


var name = 'Global Dev';

const obj = {
    name: 'Local Dev',
    getName : function() {
        console.log(this.name);
    }
};

const { getName } = obj;
getName(); // Global Dev  🤔🤔🤔

Here we have destructured the getName function out of the object obj.
Then, we have called it without any context
It means the function execution here is happening with Global context.
So while execution if it encounters any this in the code that will try to resolve its value by checking window object.
We have 'Global Dev' value assigned to name in window object so this.name resolved to window.name which is 'Global Dev'.
Note: The same would have resulted in returning undefined in strict mode.

How to Overcome this?
By using Explicit binding

3.Explicit Binding:

Explicit binding is a process of specifying what this object is, while calling the function. It is usually done with the help of the famous Js trio call, apply and bind.

var name = 'Global Dev';
const obj = {
    name: 'Local Dev',
    getName: function() {
        console.log(this.name);
    };
};

const { getName } = obj;
const newContext = {
  name: 'New Dev'
};
// Explicit binding takes priority over Default binding 
getName.call(newContext); // New Dev 

// Explicit binding takes priority over Implicit binding 
obj.getName.call(newContext); // New Dev

It is clear from the above that, Explicit bindings take priority over Implicit or Default Binding.

But does it have a Higher priority than Arrow function's this binding.
No!

var name = 'Global Dev';
const obj = {
    name: 'Local Dev',
    getName: () => {
        console.log(this.name);
    }
};

const newContext = {
  name: 'New Dev'
};

//Arrow function's bind took priority over Explicit binding.
obj.getName.call(newContext); // Global Dev

Priority Ordering:

Arrow Function > Explicit Binding > Implicit Binding > Default Binding

4.`new` Binding:

If the function is called with new operator in the prefix then the newly constructed object is the this reference here.

  function MyName() {
    this.name = "Local Dev";
  }

  MyName.prototype.getName = function() {
    console.log(this.name);
  }

  // `new` binding
  const name_instance = new MyName();
  console.log(name_instance.name);    // Local Dev
  // Implicit Binding
  name_instance.getName();            // Local Dev

Here we have defined our instance variable name_instance which is formed from new opertor operating on factory function MyName.
All references to this in MyName function refers to the newly created object instance name_instance

All our Rules from 1 to 3 applied to this instance (name_instance):

  // Default Binding
    var name = "Global Dev"
    const {getName} = name_instance;
    getName();                                      // Global Dev

  // Implicit Binding
    name_instance.getName();                        // Local Dev

  // Explicit Binding
    name_instance.getName.call({ name: 'New Dev'}); // New Dev

  // Arrow Binding
    MyName.prototype.get_Arrow_Name = () => {
      console.log(this.name);
    }
    name_instance.get_Arrow_Name();                  // Global Dev

React Classes:

  class App extends React.Component {
    constructor() {
      this.handle_three = this.handle_three.bind(this);
    }

    handle_one() {
      console.log(this);
    }

    handle_two = () => {
      console.log(this);
    }

    handle_three() {
      console.log(this);
    }

    render() {
      return (
        <React.Fragment>
          {/* Default binding */}
          <div onClick={this.handle_one}></div> 
          {/* Arrow Function */}
          <div onClick={this.handle_two}></div>
          {/* Expicit Binding at constructor*/}
          <div onClick={this.handle_three}></div>
        </React.Fragment>
      )
    }
  }

Handlers on JSX elements will call the function declared.
handle_one attachment results in calling the function with no context(Default binding). This results in undefined because React ensures Default binding results in undefined rather than a Global.
handle_two attachment results in calling the function with the newly created Intsance's (Current App Class's instance's) context.
handle_three attachment results in explicit binding to provide value for this at the constructor.

Lets Celebrate now!

Hope you guys have Enjoyed this Article 😄

Reference: Kyle Simpson's this & Object Prototypes

My Website, blogs and Twitter

Thats all Folks!!!

Array Flattening in 5 lines

Dhilip kumar — Fri, 25 Oct 2019 03:19:14 +0000

Hello there 👋,

Array flattening is a process of reducing a Multi Dimensional Array into a single dimensional Array or with the dimensions specified.

Example:

Input: [1, 2, 3, 4, [5, 6]]

Output: [1, 2, 3, 4, 5, 6]

Thought Process:

Step 1: We should iterate over the given array.
Step 2: For Each element if it is not an array push it into the new array.
Step 3: If it is an array repeat Steps 1 to 3.

Observations:

We use the output of one iteration in the next, so the idea here is to use Array.reduce().
Since there is a repetition of steps 1 to 3 on getting an Array as input, we will have to do a recursion.

Lets get into coding:

function flattenArr(arrToFlatten) {
    return arrToFlatten.reduce((acc, value) => {
      if (value instanceof Array) {
        return acc.concat(flattenArr(value));
      }
      return acc.concat(value);
    }, []);
}

Call it as:


const arr = [1, 2, 3, 4, [5, 6]];
flattenArr(arr) // [1, 2, 3, 4, 5, 6]

flattenArr is a function that accepts arrToFlatten of type Array as Argument.
We return the output of arrToFlatten.reduce.
Let the initial value of the result be empty array []
If the current input value is not an Array's instance add it to the acc using concat utility function.
If that turns out to be an instanceof an Array then call flattenArr again with the Array(value) as a parameter, then concat that with acc.

So now, with this approach we can reduce any Multi Dimensional Array into a Single Dimensional Array.

How about the case where we need it to flatten only upto specified levels deep and anything nested inside that should remain as it is?

Its simple we get another value from the user in the argument(depth).

function flattenArr(arrToFlatten, depth) {
    return arrToFlatten.reduce((acc, value) => {
      if (value instanceof Array && depth > 0) {
        return acc.concat(flattenArr(value, depth - 1));
      }
      return acc.concat(value);
    }, []);
}

Call it as:


const arr = [1, 2, 3, 4, [5, 6, [7, 8]]];
flattenArr(arr, 1) // [1, 2, 3, 4, 5, 6, [7, 8]]

Add an additional parameter depth and check if its value is greater than 0 before processing an array inside the Reduce function.
If the depth value is greater than 0 it means the Array has to be flattened. So recursively call flattenArr with the array and depth - 1 as we have gone in one level.
Each recursive call means we are going 1 level deep so we reduce the value of depth by 1

Oh yeah, I was saying 5 lines. Here you go!!!

const flattenArr = (arrToFlatten, depth) => (
    arrToFlatten.reduce((acc, value) => (
      ((value instanceof Array && depth) ? [...acc, ...flattenArr(value, depth - 1)] : [...acc, value])
    ), [])
);

Handling edge cases:

What if the first parameter is not an array?
What if depth is not a number?

Lets add a check:

 const typeOfDepth = typeof(depth);
 if (!(arrToFlatten instanceof Array) || !(typeOfDepth === 'number')) {
    throw new Error('Invalid Argument Supplied');
 }

As George suggested in the comment below, we do have default Array.flat() method however to attain browser support you will have to get help from your js transpilers like babel.

My Website, blogs and Twitter

Thats all Folks!!!

Why should you use "noopener"? Beware of security Flaws.

Dhilip kumar — Sat, 17 Aug 2019 08:28:24 +0000

TLDR:
Checkout the implementation example here:
Live Demo

Let's Open a url in new tab from within our website

HTML WAY


<a href="https://malicious-domain.netlify.com" target="_blank">Visit Malicious Website!</a>

Okay, here we have a href attribute to a malicious website and target as _blank attribute to make it to open in a new tab.

Let us say that, the user clicks on "Visit Malicious Website!" from the above code. He gets redirected to the malicious website in a new tab.

The flow seems so plain and simple what's the possible Security risk that the user has here?

The user is redirected to a domain from your page.
At this time, the browser attaches all your window variable's content of your current website to window.opener variable of the malicious website.
- This is done by Chrome and Firefox browsers which has one of the largest user base.
- So now the malicious website has access to your website's window, which obviously opens up a security loop hole in redirection of this method.
- Now the malicious website once it has access to your website's window variable through window.opener it can redirect your previous website to a new Phishing website which could look similar to the actual website you opened and might even ask you to login again.
- The above change can be done in the malicious website by just writing the following code

  if (window.opener) {
    window.opener.location = 'https://www.dhilipkmr.dev';
  }

So the Innocent users get caught in this trap and would provide the login details which could be exposed to the attacker.

How do we avoid this?

A simple way is to add a rel attribute with noopener to the <a> tag.

<a href="https://malicious-domain.netlify.com" rel="noopener" target="_blank">Visit Malicious Website!</a>

What does it do?

rel="noopener" indicates the browser to not to attach the current website's window variable to the newly opened malicious website.
This makes the window.opener of the malicious website to have null as its value.

So be careful when you navigate your users to a new domain that is not maintained by you.

Not always we open a new tab with a tag there are cases where you have to open it through executing javascript's window.open() like below,


function openInNewTab() {
  // Some code
  window.open('https://malicious-domain.netlify.com');
}

<span class="link" onclick="openInNewTab()">Visit Malicious Website!</span>

Here there is no mention of noopener so this results in passing window of the current website to the malicious website.

The javascript Way!

How to handle such cases when new tab is opened through js?

 function openInNewTabWithoutOpener() {
   var newTab = window.open();
   newTab.opener = null;
   newTab.location='https://malicious-domain.netlify.com';
 }

<span class="link" onclick="openInNewTabWithoutOpener()">Visit Malicious Website!</span>

Here,

We have opened a dummy tab through window.open() which opens about:blank, so it means it has not redirected to the malicious website yet.
Then we modify the opener value of the new tab to null
Post that we modify the new tab's url to the malicious website's url.
This time, again opener would have been null, due to which it cannot access the window variable of the first website.

Problem Solved.

But this method wont be possible in older versions of Safari, so we again have a problem.

How to fix Safari's issue?

function openInNewTabWithNoopener() {
  const aTag = document.createElement('a');
  aTag.rel = 'noopener';
  aTag.target = "_blank";
  aTag.href = 'https://malicious-domain.netlify.com';
  aTag.click();
}

<span class="link" onclick="openInNewTabWithNoopener()">Visit Malicious Website!</span>

Here we mimic clicking on an anchor tag.

We create <a> tag and assign the required attributes then execute click() over it, which behaves the same way as the link is clicked.
Do not forget to add rel attribute to the tag here.

Other facts:

When you click CMD + LINK on anchor tag, chrome, firefox and Safari considers makes window.opener of the malicious website as null
However, on CMD + LINK on an element where new tab opening is handled through javascript, the browser attaches window variable and sends it to the new tab.
By default, the new version of Safari removes window.opener when used with anchor tag for all cases, to pass the window info to the new tab you have to explicitly specify rel='opener'

Checkout the live implementation example here:
Live Demo

None shall bypass your Security.

Follow me may be :P

My Website, blogs and Twitter

Thats all Folks!!!

Optional Chaining in Javascript

Dhilip kumar — Thu, 15 Aug 2019 01:32:18 +0000

What if I tell you that the following snippet is Possible in javascript?


const hasWorld = response && response.data && response.data.msg && response.data.msg.includes('world');

const hasWorld = response?.data?.msg?.includes('world');

This way of checking the property of an object known as Optional Chaining.

This is currently in Stage 3 tc39, however with babel we will be able to use it in our code right now by adding the following plugin @babel/plugin-proposal-optional-chaining to your config file for babel v7+.

Below is the Transpiled Babel Code Example with Optional Chaining.

Transpiled code Example

Creating Infinite Scroll with 15 Elements

Dhilip kumar — Mon, 05 Aug 2019 21:17:40 +0000

Infinite scrolling is where we load a part of the result up front, and on reaching the end of the loaded list we load the next set of results and so on.

So what is the problem?

Let us say that there is a list with 10,000 elements, say each element is displayed inside an <li> tag. So when we reach the end of the list then there will be 10,000 <li> nodes attached to the parent.

In case of complex <li> with more number of children inside it , this will cause a huge hit in the website's performance and also affects scrolling performance of the webpage.

How to overcome this overloaded DOM size?

It can be overcome by Unloading or discarding the top <li> which are not part of the user viewport.
(i.e) As and when the user scrolls down we start adding the new rows and should delete the existing rows which are above the fold.
We will be achieving this with fixed children size, say 15 rows max and we will update the same for new set of inputs thus maintaining a lower DOM size.

Things to consider:

*Adding new node to the bottom of the list should be done when the last element of the list enters the viewport.
*After adding the new elements to the DOM the existing elements should be deleted such that the deleted elements lies above the fold.(i.e) out of user's viewport.
*When the user scrolls up and reaches the top element then we should load the deleted top elements and should delete the bottom ones, which are below the viewport.

What are we gonna Implement?

A Component that can render a list of n number of items with fixed window size of 15 elements.(i.e) At any time only 15 DOM nodes will be present even on infinite scrolling through n elements.

Output:

Approach:

We are going to get some help from CSS in achieving this.(We will make use of CSS's Absolute positioning).
Our Parent div which wraps all our element is going be of relative in position.
All our children will be positioned absolutely with respect to the parent div.
We calculate the top for each of the child and apply it in style parameter of the <li>.
At any given time we will maintain 15 <li> elements in the DOM maximum.

Note: For Simplicity, we are going to consider only fixed size <li> cases.

Implementation:

Initialization:

import React from "react";
const THRESHOLD = 15;

class SlidingWindowScroll extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      start: 0,
      end: THRESHOLD
    };
    this.$topElement = React.createRef();
    this.$bottomElement = React.createRef();
  }
}

We have created our SlidingWindowScroll component which has a state with start value and end value in it.
start is the starting index of the list array which has to be loaded lazily on scroll.
end is the last index of the list array.
THRESHOLD gives the maximum number of <li> elements that should be present in the DOM.
We create two refs:
- this.$topElement, will point the first element(0th index) in the list item.
- this.$bottomElement, will point the last element(14th index) in the list item.
Whenever the new elements are added or deleted the refs has to be updated accordingly to point to the top and bottom of the presently rendered list.

Render:

 getReference = (index, isLastIndex) => {
    if (index === 0)
      return this.$topElement;  // Attach this ref for first element
    if (isLastIndex) 
      return this.$bottomElement; // Attach this ref for last element
    return null;
  }

render() {
    const {list, height} = this.props;
    const {start, end} = this.state;
    const updatedList = list.slice(start, end);
    const lastIndex = updatedList.length - 1;
    return (
      <ul style={{position: 'relative'}}>
        {updatedList.map((item, index) => {
          const top = (height * (index + start)) + 'px';
          const refVal = this.getReference(index, index === lastIndex);
          const id = index === 0 ? 'top' : (index === lastIndex ? 'bottom' : '');
          return (<li className="li-card" key={item.key} style={{top}} ref={refVal} id={id}>{item.value}</li>);
        })}
      </ul>
    );
  }

We get the list and height from props and start and end of the list from state.
updatedList gives the new set of elements to be rendered.
<ul> is made relative.
For each item in the list, we calculate it's top position from its relative parent.
It is calculated by the position of the current item in the list (index + start) multiplied by height of each element.
refVal gives the ref that has to be attached. It will have reference to this.$topElement in case of index 0 and reference to this.$bottomElement in case of last index.
We attach id with value top for first element and bottom as id for last element.

Setting up the Observer for refs:


  componentDidMount() {
    this.intiateScrollObserver();
  }

  componentDidUpdate(prevProps, prevState) {
    if ((prevState.end !== this.state.end) || (prevState.start !== this.state.start)) {
      this.intiateScrollObserver();
    }
  }

On Mounting and on whenever the value for start or end changes the ref which points to the top and bottom of the rendered <li> is changed.
Since the ref starts pointing to different element we will have to listen to those two refs to know when they come into viewport.

We use IntersectionObserver to identify if the root or bottom element is in the viewport.

intiateScrollObserver = () => {
    const options = {
      root: null,          // To listen to window scroll
      rootMargin: '0px',   // if there is any margin associated with it
      threshold: 0.01      // if 1% of the element is in view
    };
    this.observer = new IntersectionObserver(this.callback, options);
    if (this.$topElement.current) {
      this.observer.observe(this.$topElement.current);
    }
    if (this.$bottomElement.current) {
      this.observer.observe(this.$bottomElement.current);
    }
  }

We create our IntersectionObserver with a callback that should get fired when the elements enters and leaves the viewport and options
In options we specify that we are listening to the scroll event in window and the element should be marked as visible even when 1% of the element comes into view(by means of threshold key).
Then, we observe both the refs (this.$topElement and this.$bottomElement) to know when it enters/ leaves viewport.

Handling viewport entry of `<li>`

callback = (entries, observer) => {
    entries.forEach((entry, index) => {
      const listLength = this.props.list.length;
      const {start, end} = this.state;
      // Scroll Down
      // We make increments and decrements in 10s
      if (entry.isIntersecting && entry.target.id === "bottom") {
        const maxStartIndex = listLength - 1 - THRESHOLD;     // Maximum index value `start` can take
        const maxEndIndex = listLength - 1;                   // Maximum index value `end` can take
        const newEnd = (end + 10) <= maxEndIndex ? end + 10 : maxEndIndex;
        const newStart = (end - 5) <= maxStartIndex ? end - 5 : maxStartIndex;
        this.updateState(newStart, newEnd);
      }
      // Scroll up
      if (entry.isIntersecting && entry.target.id === "top") {
        const newEnd = end === THRESHOLD ? THRESHOLD : (end - 10 > THRESHOLD ? end - 10 : THRESHOLD);
        let newStart = start === 0 ? 0 : (start - 10 > 0 ? start - 10 : 0);
        this.updateState(newStart, newEnd);
      }
    });
  }

Whenever this.$topElement or this.$bottomElement comes into viewport or leaves the viewport callback will be called.
entries is an array with all observers in the order of creation.
entries in our case will have this.$topElement and this.$bottomElement.
isIntersecting property gives if the element is in viewport and id helps us in deciding if it is the bottom element that came into view or the top one.
We make calculation to maintain 15 elements between start and end of the state.
We add and remove items in number of 10 and we make sure atleast 15 elements are present.
Finally, we update state with new values for start and end.

Updating State:

resetObservation = () => {
    this.observer.unobserve(this.$bottomElement.current);
    this.observer.unobserve(this.$topElement.current);
    this.$bottomElement = React.createRef();
    this.$topElement = React.createRef();
  }

  updateState = (newStart, newEnd) => {
    const {start, end} = this.state;
    if (start !== newStart || end !== newEnd) {
      this.resetObservation();
      this.setState({
        start: newStart,
        end: newEnd
      });
    }
  }

We set the state with new values and also reset all the observer.
While resetting, all the observers should be made unobserve to not to observe it's change in the future. And we create a new ref for this.$bottomElement and this.$topElement.

Now on scroll we have only 15 elements at a time but giving the user the sense of having it all in the DOM.

Have a unique key to avoid re-rendering of same <li>s.

Output:

Follow me for interesting contents.

Repo Link
My Website, blogs and Twitter

That's All Folks!

Find Max. Paths to last Index in a 2D Matrix in Javascript

Dhilip kumar — Thu, 06 Jun 2019 16:17:39 +0000

Read all my blogs here at My Website and follow me here on Twitter

It has been a while since my last blog.
I will be writing and explaining some algos as well as some interesting Javascript/React concepts that I come across.

PROBLEM STATEMENT:

Given the length of Row and Column of a 2D matrix.
Starting from origin (0,0), find the maximum number of Paths one can take to reach the last index.
Allowed ways to move => Right and Bottom.

Example:

Let, row's length and column length be (2, 2)
Starting from (0,0) one should reach (1,1)
So the number of paths for that are: 2

Path 1: (0,0) -> (0,1) -> (1,1)
Path 2: (0,0) -> (1,0) -> (1,1)

Thought Process:

Checking for a Pattern:

We are allowed to traverse in two ways Down and Right for every Index. So this is a pattern.

Edge Cases:

While we iterate we need to be careful about the ending index's count and so we should handle those cases.
Path is 0 when the input is less than 1 for either row or column.(i.e.) Input cant be less than 1 for row length and column length

We found a pattern to go through for every index we can choose to solve with iteration / recursion.

Here we will solve it through RECURSION!

const num_of_paths = findMaxPathSrcToDes(3, 3);
console.log('Number of Paths', num_of_paths);

We call findMaxPathSrcToDes and pass row length and column length and log it.

The intermediate Function:

function findMaxPathSrcToDes(rows, cols) {
  // Initial rows and columns to begin with.0,0 is the first row and col index we are choosing
  return findMaxPath(0, 0, rows - 1, cols - 1);
}

findMaxPathSrcToDes function accepts the row length and column length from the user.
It then returns the output from findMaxPath function to which we pass the origin which is (0,0) and destination index(rows -1, cols - 1).
We can modify this origin and destination index to user defined positions by accepting those, so that we can identify the number of paths any index from any index.

Finding the Paths:

findMaxPath function takes in 4 params and outputs the number of path.

currentRow - Which indicates the current index's Row that is being processed.
currentColumn - Which indicates the current index's Column that is being processed.
destRow - Destination row index
destCol - Destination column index

In any Recursive solution, start with writing the base conditions or Exit conditions.

So, what is a Base condition or Exit condition?

It is basically the case on satisfying which our algorithm should terminate. So, let's formulate one.

When currentRow > destRow (In this case it indicates that the currentRow count has gone out of bound).
When currentColumn > destCol (In this case it indicates that the currentColumn count has gone out of bound). So we return '0' in both the cases.

function findMaxPath(currentRow, currentColumn, destRow, destCol) {
  // Base condition
  if (currentRow > destRow || currentColumn > destCol) {
    return 0;
  }
}

Success Case:

if currentRow === destRow or currentColumn === destCol this indicates that we have reached the destination index so we return 1 to indicate a successful path.

if (currentRow === destRow && currentColumn === destCol) {
     return 1;
  }

Recursion Case:

For each index there are two ways 1.Right and 2.Down
So, we have to recurse in both ways and add the path formed from each ways.
We call findMaxPath by incrementing currentRow by 1.
Then again by incrementing currentColumn by 1 and adding the outputs of these two and return them.

const pathsInRows = findMaxPath(currentRow + 1, currentColumn, destRow, destCol);
const pathsInColums = findMaxPath(currentRow, currentColumn + 1, destRow, destCol);
return (pathsInRows + pathsInColums);

CodePen link here

Next Step:

You could try printing all possible paths along with count.

Follow me for interesting contents.

Repo Link
My Website, blogs and Twitter

That's All Folks!

Implementing our own `split()` in Javascript

Dhilip kumar — Wed, 08 May 2019 15:09:59 +0000

What are we going to achieve?

Implement our custom split function myCustomSplit which behaves the same way as split() in javascript.

Output:

const str = "val1&$val2&$val3";
const op = str.myCustomSplit('&$');
console.log(op);

// output
// ["val1", "val2", "val3"]

Do checkout my Website for all my blogs.

Let's Split:

String.prototype.myCustomSplit = function(splitVal) {
  const outputArr = [];
  const string = this;
  let nextVal = '';
  const splitlength = splitVal.length;
  let i = 0;
  // ...Some code
}

myCustomSplit - Name of the custom Split function.
splitVal - Value based on which we have to do the split.
string - The string on which we execute split.
outputArr - The array that will be returned as output.
nextVal - Gives the intermediate string that is formed.
splitlength - Length of the splitVal

while(i < string.length) {
  // When the current character is same as splitVal's first character
  if (string[i] === splitVal[0]) {
    let split_length_remaining = splitlength - 1;
    let split_length_passed = 1;
    let similarSplit = string[i];
    while(split_length_remaining) {
      if (string[i + split_length_passed] === splitVal[split_length_passed]) {
        similarSplit += string[i + split_length_passed];
        split_length_passed++;
        split_length_remaining--;
      } else {
        break;
      }
    }
    if (!split_length_remaining) {
      outputArr.push(nextVal);
      nextVal = '';
    } else  {
      nextVal += similarSplit;
    }
    i = i + split_length_passed;
  } else {    // When the current character is different from `splitVal` 's first character
    nextVal += string[i];
    i++;
  }
}

Explanation:

Loop for the entire string Length.
(else case)Check the current character with the splitval's first character, if they are different concatenate with nextVal and increment i by 1.
(if case)If the current character is same as the splitval's first character, then we go into inner while loop which helps when the split value is more than single character.

Inside `if` case:

split_length_remaining gives the remaining length of the splitVal that we have to iterate for.
split_length_passed is set to 1 because we already compared the first character of the splitVal.
similarSplit helps in adding all the values after the first value is matched in inner while loop, so that if the last character of splitVal fails then we can add the content of similarSplit to the nextVal variable.
If split_length_remaining is not 0, we did not completely compare all the values. So, we go on for other values to check if they match the input string.If they are equal we increment i value and decrement split_length_remaining.
if split_length_remaining has reached 0 then we would have already matched all the values in splitVal with the string, so push the content into nextVal and reset it to empty string.

 outputArr.push(nextVal);
 return outputArr;

Finally, push all the contents in nextVal to outputArr and return it.

OUTPUT:

const x = "val1&$val2&$val3".myCustomSplit('&$');
console.log(x);
// output: ["val1", "val2", "val3"]

Checkout the code at codepen

Follow me for more interesting contents.

My Website, blogs and Twitter

DEV Community: Dhilip kumar

The Spooky tracker

The Spooky tracker

Cookies

More about cookies:

Enough, tell me how do they track already!

Enter 3rd party cookies:

You don't want this to happen?

Software Engineer 2 UI Interview at Microsoft

Firstly, why do I have to write this in a blog?

How did I apply?

How did I Prepare?

Resources for Frontend?

Do I get to know which team I am being hired before giving the interview?

How do I know which Level I am being hired for?

Okay enough, tell me about the rounds already!

Round 1 (Machine Coding): (2 hours)

Round 2 (Javascript): (1 hour)

Round 3 (Design / HLD + LLD /): (1 hour)

Round 4 (PSDS) : (1 hour)

Round 5 (Hiring Manager): (typically 45 mins - 1 hour)

Round 6 (As Appropriate): (1 hour)

What Next?

A Node Email Service using AWS lambda

The Problem:

The solution:

What are we building?

Table Of Contents

1.AWS Account Setup:

2.Setting up Lambda:

3.Uploading the emailer code to your lambda:

4. Google Oauth and GCP Setup:

Setting up GCP:

Setting up OAUTH:

5. Update the keys in your Code:

6. Creating AWS API Gateway:

Creating POST:

Real life Web Optimizations

Optimising Goibibo Trains

Problems we had:

1.Feature Parity:

2.Hard to Read/Edit Existing Code:

3.No Shareable URL(Review Page):

4.Better User Experience**

5.Size:

Steps taken to resolve all the issues listed above:

1.Feature Parity:

2.Rewrite Train in a Better lightweight framework

Our Rewrite framework Options:

a.No Framework:

b.Svelte:

c.Preact:

Final Verdict:

Enter groot

Motto of groot:

1.Lightweight:

2.MPA:

3.Server Side Rendered:

4.IsoMorphic:

5.Packages:

6.State Management:

7.No Axios:

App Architecture:

purify-css to the rescue:

Page Drop offs:

Review Page Comparison:

Creating JSON.superStringify()

Expected Output:

Assumptions:

Approach:

How do we tackle each of them?

Let's get coding.

Step 1: Let us handle all cases except Object type

Step 2: Including Arrays:

Step 3: Including Objects:

Understanding `this` with E.D.I.N concepts

What is this in javascript?

Why is it so complicated to understand?

Rule 1.Implicit Binding:

obj.getName()

Motto of `groot`:

`purify-css` to the rescue:

What is `this` in javascript?

`obj.getName()`

The `Fat Arrow` function catch:

4.`new` Binding:

Handling viewport entry of `<li>`

Inside `if` case: