Categories
JavaScript

console.log()

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 […]

Categories
JavaScript Programming

The Ultimate JS Mastery Series – Part 1

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 […]

Categories
Basic JavaScript

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 […]

Categories
JavaScript

Prevent Page Scrolling Using JavaScript

Categories
JavaScript

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 […]

Categories
css

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 […]

Categories
Basic

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 […]

Categories
Basic

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 […]

Categories
Basic

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 […]

Categories
Vue.js

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 […]