Posts

Critical Rendering Path

What is Critical Rendering Path?

Here’s a quick recap of the browser’s steps: * Process HTML markup and build the DOM tree. * Process CSS markup and build the CSSOM tree. * Combine the DOM and CSSOM into a render tree. * Run layout on the render tree to compute geometry of each node. * Paint the individual nodes to the screen.

Some CSS Stuff

CSS Styling Tips

  • How to create a container that is properly centered?

    
    .container {
    width: 1140px;
    margin: 24px auto 24px auto;
    }
    
    

  • How to add a break line above an element?

    
    .blog-box {
    padding-top: 20px;
    border-top: 1px solid #808080;
    }
    
    

Breadth First Search

When we can use BFS?

  • Shortest Path in a simple graph?
    • all length of edges in the graph must be equal
  • Level Traverse
  • Connected Components
  • Topological Sorting

Tree

Binary Search

Binary Search Given a sorted array, find any/first/last element in the array Time complexity T(n) = T(n/2) + O(1) = T(n/4) + O(1) + O(1) = T(n/8) + O(1) + O(1) + O(1) = ….. = O(logn) How to implement binary search? use while loop What’s the condition in while loop? start + 1 < end (vary important) How to calculate mid point? mid = start + Math.

Implement a LRU Cache

LRU Cache Design and implement a data structure for Least Recently Used (LRU) cache. It should support the following operations: get and put. get(key) - Get the value (will always be positive) of the key if the key exists in the cache, otherwise return -1. put(key, value) - Set or insert the value if the key is not already present. When the cache reached its capacity, it should invalidate the least recently used item before inserting a new item.

This is a leetcode problem 133 Clone Graph

Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. use BFS to solve this problem. use a Map in javascript to store a mapping between nodes in original graph and nodes in new graph. when using BFS to traverse the original graph, if a neighbor is already in the map, it means the corresponding node has been created and we just need to connect two nodes in the new graph when using BFS to traverse the original graph, if a neighbor isn’t in the map, we create a new node in the new graph, push the neighbor in the queue and connect two nodes in the new graph.

Ten JavaScript Questions

Ten JavaScript Questions Differences between keyword var and let let was introduced in ES6, old browsers won’t support it, var has been around for a long time let is block scoped while var is function scoped. When a var variable is declared in a block, you can still access it outside the block let is not hoisted while var is hoisted Differences between ‘undefined’ and ‘null’

Throttle vs. Debounce

What is Throttle? Throttling enforces the maximum number of time a function can be called over time. Let’s look at how to use throttle function in underscore.js library. This is a simple implementation of throttle function. var throttle = (func, waitTime) => { var wait = false; return function() { if (!wait) { func.call(); setInterval(() => { wait = true; }, waitTime); } }; } What is Debounce? Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called.

What is REST?

What is REST? It is just a mapping between HTTP routes and CRUD(Create, Read, Update and Destroy). It is a convention. To illustrate how to create HTTP routes in back-end, a picture is necessary. RESTFUL