I Don't Want To Be On Facebook All Day!
summary
A full‑page React app called messenger.com gets built with module‑scoped CSS using a slash naming convention and a CX class‑transformer that lets static analysis bundle CSS at build time; prefixes and unused units get stripped per‑browser to save bytes (claimed as “half a Hiroshima a day” and “200 stray cats” worth of savings). A packager combines modules (once tripped ad blockers), flexbox compatibility required per‑browser fixes, RTL font fallback to Arial, four breakpoints, auto‑closing side panel, and JS measured truncation; images use background‑sizing plus invisible img overlays for accessibility.
AI-written summary · about
chapters (22)
- 0:00Start
- 1:25how do we front-end at Facebook?
- 1:36modules
- 3:44h1 className= cx
- 4:41static analysis
- 4:55CSS is auto-packaged and required
- 5:11the two modes
- 5:25human
- 8:52messenger Foo.css messengerBar.css
- 9:59less or sass
- 11:20How did it all start?
- 11:31style-agnostic components
- 12:13Abstract TreadlistContainer
- 12:43no old browsers!
- 13:10new css stuff!
- 14:04flexbox
- 15:41one font definition
- 17:29responsive
- 17:524 breakpoints
- 21:01Messenger Interface Guide
- 23:53background-size
- 25:29First Secondary Domain
related talks
14mBuilding the New Facebook with React and Relay
51mFunctional Web Development – An Introduction to React.js
29mPreprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the Website
25mRethinking CSS - Introducing Stylex
17mBuilding The New Facebook With React and Relay
13mCustom CSS is the path to inconsistent UI
24mDecoding StyleX: Meta's Cutting-Edge Styling System
05mLightning talk from Nicolas Gallagher