Categories
JavaScript Vue.js

Measure function execution time

Background: Need to call a button click function in the child component from parent. Two methods: Call method in the child component Trigger click event on the button of the child element Want to compare performance of these two methods. https://stackoverflow.com/questions/313893/how-to-measure-time-taken-by-a-function-to-execute

Categories
JavaScript

Array

Remove duplicate values https://stackoverflow.com/a/9229821 Get the last item https://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array https://stackoverflow.com/questions/9050345/selecting-last-element-in-javascript-array Toggle an element PS: only removes the first instance of the value https://stackoverflow.com/questions/17153238/how-to-toggle-an-element-in-array-using-javascript Check existence of an element tests whether at least one element in the array passes the test implemented by the provided function Scenario: To check if an element contains at least one of […]

Categories
css JavaScript

Element class

Element.classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList Class start with selector [class^=”pre-“] Only check the first item in classList

Categories
JavaScript

Data attribute

Set attribute Get attribute Delete attribute

Categories
JavaScript

Vanilla JS to get dimentions

browser viewport PS: innerHeight & innerWidth include scrollbars, clientHeight and clientWidth do not. https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions An element element.offsetWidth & element.offsetHeight (include the border) element.clientWidth & element.clientHeight (exclude the border) Get margin or border of an element: Element position relative to browser viewport img src: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Categories
css

Limit text lines

line-clamp line-clamp

Categories
JavaScript

Move element

Add as the last child node of the parent element https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild Add as the first child node of the parent element https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend Insert at the specified position Position: ‘beforebegin’: Before the element itself. ‘afterbegin’: Just inside the element, before its first child. ‘beforeend’: Just inside the element, after its last child. ‘afterend’: After the element itself. <!– beforebegin –> <p> <!– […]

Categories
css

Tortenstück

Useful component demos: box with arrow on one side: https://cssarrowplease.com/ CSS Triangle width & height equal 0 border color transparent, exception the direction with the triangle CSS Triangle

Categories
JavaScript

Modern JavaScript: ES6 Basics

Task 1: Introduction Rhyme: cloud learning system, splite screen to workspace(desktop) and video; nodemon -> browser-sync; npx: execute bin file as node dependencies. Q: Difference between npm and npx? A: Npm is a tool that use to install packages. Npx is a tool that use to execute packages. Task 2: Variable (let) and Scoping var: redeclarable only function-scope, […]

Categories
React

Build your first React Website

https://www.coursera.org/projects/build-first-react-website What is React? Open-source JavaScript library,  maintained by Facebook; Different from React Native, which is designed for App development; Virtual DOM (Memory RAM) for faster rendering. Functional components Stateless sanpshots Class-based components: Object-oriented states, more dynamic; Lifecycle hooks; JSX stands for JavaScript XML. Question: difference between XML & HTML? XML mainly focuses on transfer […]