The console.log() method outputs a message to the web console. Syntax console.log(obj1 [, obj2, …, objN]);console.log(msg [, subst1, …, substN]); Output single value / object Note: what you get logged on the console is a reference to the object, which is not necessarily the ‘value’ of the object at the moment in time you call console.log(), but it is […]
Author: Yujin Wang
Getting Started JavaScript ranks first place in the most popular technologies at Stack Overflow for year 2020 Where does JavaScript code run? JavaScript Engine in browsers (originally for frontend) FireFox: SpiderMonkey Chrome: v8 Node (runtime environment for backend) a C++ program include Google’s v8 JavaScript engine Difference between ECMAScript & JavaScript ECMAScript: specification JavaScript programming […]
Testing in JS
What is “Testing”? We have expected result of our code, and testing is to make sure that the expectation is achieved, otherwise modification should be done. Instead of manually do it, we prefer to automate and simplify the process. Why Test? Get an error in case break code save time think about possible issues and […]
Detect Element Visibility
There are two ways to know when an element gets visible / hidden in the screen during scrolling: Listening to the window scroll event Observing the element for visibility using Intersection Observer API Listening to the scroll Event Attach a scroll event handler to the window object, and use getBoundingClientRect() to calculate the position of […]
Clean, Maintainable CSS
CSS best practices CSS variables object-oriented CSS BEM CSS Best Practices follow a naming convention kebab case: .nav-bar camel case: .navBar Pascal case: .NavBar BEM: Block Element Modifier block__element block–modifier: indicate different versions create logical section in your stylesheet Basic styles Typography Forms etc avoid over-specific selectors avoid !important sort CSS properties take advantage of […]
Data Structure and Algorithms 3
Sorting Algorithms Bubble sort From left to right, if the item is not in the right position, swap it with the right item; after each iteration, the next largest item bubbles up and moves to its correct position Time complexity: Selection sort In each pass, find the next smallest item and move it to the […]
Data Structure and Algorithms 2
Non-linear structures Tree A tree is a data structure that stores elements in a hierarchy. The elements are referred as nodes, and the lines connect them are edges. Each node has a value or an object. The top node in a tree is called root, and the nodes have no children are leaf nodes. Binary […]
Data Structure and Algorithms 1
Big O Notation Evaluate the performance of an algorithm (the worst case scenario) | Notation | Name | |—————|—————–| | O(1) | constant | | O(log(n)) | logarithmic | | O(n) | linear | | O(n^2) | quadratic | | O(n^c) | polynomial | | O(c^n) | exponential | Space Complexity Only calculate the additional […]
Intro to Vue 2
Vue is a progressive framework for building user interface. The core library is focused on the view layer only, and is easy to integrate with other libraries or existing projects. Expression {{ }} produce or evaluate a value combine values perform conditional logic with a ternary operator run methods on data Vue is reactive: the […]