Get Distinct Shapes

See the Pen Distinct Shapes Leetcode by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Roblox Interview Problem

Star Rating System

Apple Onsite Interview with the ACS team

Traffic Lights System

Implement DOM getByClassnameHierarchy

See the Pen getByClassnameHierarchy by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

React Tic Tac Toe Game

This was a Apple iCloud team phone interview problem

Implement getElementsByClassName

See the Pen Implement getElementsByClassName by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Dropbox Interview Problem

Implement getElementsByAttribute

See the Pen poRGdrN by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Vanilla JS Menu bar

Mock API layer data using promises, async/await, setTimeout

See the Pen Mock API layer data using promises, async/await, setTimeout by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

BST insertion

See the Pen BST insertion by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Next greater element i

See the Pen Next greater element i by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

More LinkedList functions in JS

See the Pen RwKvbEY by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Find corresponding Node of a second tree, given the node of a tree

See the Pen Corresponding DOM Node in 2nd DOM Tree by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Apple Phone Interview Question

Someone recently asked me what's the point of such questions where you get something from one tree and find something based on it in a second tree. Such kind of algorithms are useful for libraries like React. React is a UI development library that has optimized rendering for the browser. 

The browser renders HTML in the form of DOM (Document Object Model) tree. Any update to the DOM is cascaded down this tree (involves tree processing complexity) and then the browser re-paints the changes. And these operations on the DOM tree are all pretty expensive.

What React does is to create a copy of the HTML DOM - this copy DOM tree is called the Shadow DOM. Any update you make to the DOM is first made on the Shadow DOM and then all the updates are batched together and sent to the actual HTML DOM. As a result, the number of times the browser re-paints the DOM is highly reduced. Thus using React provides you with faster/optimized renderings. 

In order for React to do what it does with it's own shadow tree and the HTML DOM Tree, it needs to do things with one tree and transfer it to the other tree. 

Classes & functions in JS

See the Pen Classes & functions by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Interview details: Salesforce Manager Coding round

Implementing Custom Event listeners

See the Pen Implementing a class with event listeners by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Maximum Depth of Binary Tree

See the Pen Maximum Depth of Binary Tree by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Pangram

Closures with let and var lexical context

See the Pen Closure behavior with let and var by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Subdomain visit count

See the Pen Subdomain Visit Count by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Intersecting clickstream data

See the Pen Intersecting Clickstream data by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Most Frequent Subtree Sum

See the Pen Most Frequent Subtree Sum by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Tree Path Sum

See the Pen Tree Path Sum by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

React typeahead

React Nested Menu

React Custom Dropdown

Two Sum

See the Pen Two-Sum by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Box Stacking - Dynamic Programming

See the Pen Box Stacking Problem - Dynamic Programming by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

What happens when you enter a URL in the browser? - UI Edition

1. browser checks cache; if requested object is in cache and is fresh, skip to #9
2. browser asks OS for server's IP address
3. OS makes a DNS lookup and replies the IP address to the browser. Each DNS can forward to other DNS if it doesn’t have the data, till it reaches the root DNS (which will have the ip address)
4. browser opens a TCP connection to server (this step is much more complex with HTTPS) at port 80.
5. In case of HTTPs, it also creates a SSL connection (refer to stamp’s book)
6. browser sends the HTTP request through TCP connection
7. browser receives HTTP response and may close the TCP connection, or reuse it for another request
8. browser checks if the response is a redirect or a conditional response (3xx result status codes), authorization request (401), error (4xx and 5xx), etc.; these are handled differently from normal responses (2xx)
9. if cacheable, response is stored in cache
10. browser decodes response (e.g. if it's gzipped)
11. browser determines what to do with response (e.g. is it a HTML page, is it an image, is it a sound clip?)
12. browser renders response, or offers a download dialog for unrecognized types

Length of the longest substring

See the Pen Length of the longest substring by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

React lifecycle methods and the order in which they are called

See the Pen React lifecycle methods & their ordering by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

String to Leet

See the Pen String to Leet by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Lessons Learnt:

mapper = {'a': 0};

if(mapper['a']) ---> is false

0 || undefined ---> is undefined

undefined || 0 ---> is 0

Create a line on a graph given 2 coordinates that define the line

See the Pen Graph Line Plot by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

CSS Box Sizing

 box-sizing: 'content-box' => width = width(content), does not include padding, border or margins -> default behaviour

box-sinzing: 'border-box' => width = width(content) + padding + border, does not include margins

Binary Heap properties

 A Binary Heap is a Binary Tree with following properties.

1) It’s a complete tree (All levels are completely filled except possibly the last level and the last level has all keys as left as possible). This property of Binary Heap makes them suitable to be stored in an array.

2) A Binary Heap is either Min Heap or Max Heap. In a Min Binary Heap, the key at root must be minimum among all keys present in Binary Heap. The same property must be recursively true for all nodes in Binary Tree. Max Binary Heap is similar to MinHeap.

• Arr[(i-1)/2]	Returns the parent node
  Arr[(2*i)+1]	Returns the left child node
  Arr[(2*i)+2]	Returns the right child node

Arr[(n/2) .... (n-1)] => will contain the leaf nodes, if n is the length of the array or total number of nodes.

The traversal method use to achieve Array representation is Level Order


Source: geeks for geeks

Powers of 2 to remember for scalability questions

 

O(log N)

O(N)

O(N log N)

O(N^2)

O(2^N)

O(N!)

Source: Cracking the coding interview

Binary Tree - DFS Preorder (Stacks)

See the Pen Binary Tree - DFS Preorder (Stacks) by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Binary Tree - DFS PostOrder (Recursion)

See the Pen DFS - Binary Tree PostOrder (Recursion) by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Binary Tree - DFS PreOrder (Recursive)

See the Pen Binary Tree DFS Pre-order traversal by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Binary Tree - DFS Inorder Traversal (Recursion)

See the Pen DFS - Binary Tree Inorder (Recursion) by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Tree BFS in JS (Queue/Array)

Tree properties

1. The maximum number of nodes at level ‘l’ of a binary tree is 2^l
2. The Maximum number of nodes in a binary tree of height ‘h’ is 2^h – 1, Height of a tree with a single node is considered as 1.

BFS Complexity
Time Complexity - O(n)
Space Complexity - O(n)

Notes: BFS slower than DFS

From geeksforgeeks: 

Extra space required for Level order traversal is likely to be more when tree is more balanced and extra space for Depth First Traversal is likely to be more when tree is less balanced.

How to Pick One?

1. Extra Space can be one factor (Explained above)
2. Depth First Traversals are typically recursive and recursive code requires function call overheads.
3. The most important points is, BFS starts visiting nodes from root while DFS starts visiting nodes from leaves. So if our problem is to search something that is more likely to closer to root, we would prefer BFS. And if the target node is close to a leaf, we would prefer DFS.

Exercise:
Which traversal should be used to print leaves of Binary Tree and why? DFS
Which traversal should be used to print nodes at k’th level where k is much less than total number of levels? BFS

See the Pen Tree BFS in JS (Recursive & Non-recursive Queue versions) by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

LinkedList functions in JS

See the Pen JS LinkedList by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Create LinkedList from array in JS

See the Pen Create LinkedList from Array by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

JS Classes

See the Pen Classes using class and functions by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Vanilla JS counter

See the Pen Vanilla JS Counter by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.