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
Category: Programming
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 […]
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
Data attribute
Set attribute Get attribute Delete attribute
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
Limit text lines
line-clamp line-clamp
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> <!– […]
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
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, […]
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 […]