frontend jargon

[distums]

parse HTML

• innerHTML

div.innerHTML = '<div>One</div><div>Two</div>'

• DOMParser API

new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html')

• ContextualFragment

document.createRange().createContextualFragment('<div>One</div><div>Two</div>')

detail

[distums]

CSS Standards

• css
• css masking
• cssom view
• CSS Containment
• css-images
• css-flexbox
• css-variables
• css-writing-modes
• css-align
• box model
• scroll anchoring
• css color
• css transforms
• css text
• css-device-adapt
• css scroll snap points
• css fonts
• CSS Values and Units Module Level 3
• ResizeObserver
• CSS Display
• CSS layout api
• CSS type om

HTML5 Standards

• web-animations
• custom-elements
• fullscreen api
• event loops
• events-level-3
• dom parseing
• encode
• Notification Api
• Vibration api
• ResourcePriorities
• async clipboard api
• File api
• selection api
• template instantiation
• css-qualified-name
• css selectors 4
• css multi-column
• Console
• Css shape
• webdriver
• media-source
• referrer policy
• speech api
• pointer locker

Security

• CSP
• authn

HTTP

• http rfc2616

[distums]

CSS Features

:focus-within

detail

display:flow-root

exmaple

pointer-events

detail

meta theme-color

detail

container query

container-query-discussion

Feature Queries

detail using-feature-queries-in-css

attr function

detail

display: contents.

mask-image

[distums]

Hindley-Milner type signatures

[distums]

PRPL

• Push critical resources for the initial route,
• Render initial route,
• Pre-cache remaining routes,
• Lazy-load and create remaining routes on demand.

[distums]

flex size compute

flex-item的宽度计算：

设有n个flex-item,每个flex-item的flex-basis，flex-grow，flex-shrink值分别为：bi,gi,si，(0<i<=n) 则总宽度为bw=b1+b2+...+bn，令当前window宽度为w，则宽度变化为offset=w-bw; 如果offset>0，则wi=bi+offset(gi+/(g1+g2+...+gn))， 如果offset<0，则wi=bi-|offset|(si/(s1+s2+...+sn))。

demo

[distums]

安全

• CSP
• CORB