The Web is Good Now
summary
A burrito-review site built with Astro demonstrates concrete wins: CSS Grid with repeat(auto-fit,minmax(360px,1fr)) and Firefox masonry handle responsive cards; container queries let components reflow based on their own width; animations use element.animate, offset-path and ScrollTimeline ideas, and FLIP tweening via GSAP for smooth state changes; typography uses variable fonts, clamp-based fluid type and font-display: swap to avoid FOIT; responsive images come from Cloudinary image transforms delivering AVIF/WebP, resized URLs and lazy loading for real performance.
AI-written summary · about
chapters (14)
- 0:00Start
- 2:07Layout
- 2:54Flexboxing Grid
- 5:25Container Queries
- 7:20Animation
- 8:17Scroll Timeline
- 13:16Custom Fonts
- 15:49Variable Fonts
- 16:05Ibm Plex Mono
- 17:49Optical Sizing
- 18:30Fluid Type
- 19:03Css Custom Properties
- 20:35Container Units
- 21:32Images
related talks
48mThe web is ready for great graphic design
01h 40mUser Interfaces in the Age of Intrinsic Web Design
42mSmartWeb 2016 - Rachel Andrew
01h 01mThe Evolution of Responsive Web Design: What's Next?
51mWeb Design Engineering With the New CSS
47mPainting With the Web
52mModern CSS Layout
40mFuture-Proofing Responsive Web Design in 2023