CSS
Preload
(async fonts, styles, scripts ..etc)
Preloading means downloading asynchronously before use, so rendering won't be blocked. Later when required we can add that link to dom.
In following example , link is preloaded & later on some condition (here onload of that link itself)adding that link to dom ( setting proper attribute to make it apply on the browser)
<link href="/static_hosted/common_md.css" rel="preload"
as="style" onload="this.rel = 'stylesheet'"
onerror="this.onerror=null;this.href='/learning/static_hosted/common_md.css';"/>
Note : Link can be of any type like script, fonts, videos..etc
- https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/
- https://alligator.io/html/preload-prefetch/
- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
Grid & flex bugs
https://github.com/rachelandrew/gridbugs https://github.com/philipwalton/flexbugs
White space
To prevent multiple while space with one white space in HTML, use property "white-space: pre-wrap;"
Link