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

Categories
Coding Shortcuts

Mac Terminal Shortcut

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

Categories
Cloud

Hallo, 2020!

Say goodbye to 2019, welcome 2020! ^_^

Categories
Cloud Programming

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.