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
Author: Yujin Wang
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 […]
Basic Shortcut Control + C To abort/kill the process that is currently running in this Terminal. Control + D To exit the current tab of Terminal. Command + K / Control + L To clear screen. The same with command “clear”. !! To print and re-run the last entered command. TOP To display all active […]
Hallo, 2020!
Say goodbye to 2019, welcome 2020! ^_^
My First Blog Post
Be yourself; Everyone else is already taken. — Oscar Wilde. This is the first post on my new blog. I’m just getting this new blog going, so stay tuned for more. Subscribe below to get notified when I post new updates.