HTTP 203
Avoiding layout shift by putting the CSS in charge - HTTP 203

Avoiding layout shift by putting the CSS in charge - HTTP 203

true

Jake and Surma chat about layouts that put the content in charge, vs layouts that put the CSS in charge, and why that difference matters.

Jake's ancient article → https://goo.gle/3kLxWBd

More videos in the HTTP 203 series → http://goo.gle/HTTP203 Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs

Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast

#HTTP203 #ChromeDeveloper #WebDev

  1. Demystifyingish SVG paths

  2. FLIP animations

  3. The history API is dead. Long live the navigation API

  4. Samsung Internet - the why & how

  5. Is .css a bad idea? Is inlining the way forward?

  6. What key was pressed? (You won't believe how keyboard events work)

  7. Building VR and AR experiences using HTML

  8. Cross-fading DOM elements

  9. Generating your color palette in CSS

  10. The Zombie DOM - old DOM stuff that still haunts us today

  11. Bringing bounce and elastic easing to CSS

  12. Yes, we use a Joy-Con to change slides. Here's how…

  13. Are SPAs better than MPAs?

  14. Avoiding layout shift by putting the CSS in charge - HTTP 203

  15. Color Spaces: Do YOU know the difference between sRGB, LAB and CIE XYZ? - HTTP 203

  16. Random paint effects - HTTP 203

  17. Deno - HTTP 203

  18. Debugging memory leaks - HTTP 203

  19. HTTP 203: Season 8 trailer

  20. Top 10 performance pitfalls - HTTP 203

  21. From nothin’ to gzip - HTTP 203

  22. Progressively loading images - HTTP 203

  23. Conducting tech interviews - HTTP 203

  24. AssemblyScript - HTTP 203

  25. The big back button quiz - HTTP 203

  26. Writing Good Alt Text - HTTP 203

  27. Scheduling Tasks - HTTP 203

  28. JavaScript counters the hard way - HTTP 203

  29. Dithering - HTTP 203

  30. Importing JSON - ABANDONED - HTTP 203

  31. Web animation gotchas - HTTP 203

  32. WebAssembly Threads - HTTP 203

  33. Slashing layout cost with content-visibility - HTTP 203

  34. 3.143 ways to synchronize data across documents - HTTP 203

  35. Weak JavaScript - HTTP 203

  36. Streaming requests with fetch - HTTP 203

  37. Socially Distant HTTP 203

  38. Cross-origin fetches - HTTP 203

  39. Surma’s Interop Adventure - HTTP 203

  40. Humans can't read URLs. How can we fix it? - HTTP 203

  41. Is reduce() bad? - HTTP 203

  42. The best web feature of 2019: Part 4/4 - HTTP 203

  43. The best web feature of 2019: Part 3/4 - HTTP 203

  44. The best web feature of 2019: Part 2/4 - HTTP 203

  45. The best web feature of 2019: Part 1/4 - HTTP 203

  46. WebAssembly Interface Types - HTTP 203

  47. Import maps - HTTP 203

  48. Push Notifications - HTTP 203

  49. Is postMessage slow? - HTTP 203

  50. Scope in JavaScript - HTTP 203

  51. Handling updates offline-first - HTTP 203

  52. Four silly browser hacks - HTTP 203

  53. How we got into web development - HTTP 203

  54. Changing web standards - HTTP 203

  55. Solving Clickjacking - HTTP 203

  56. But… why HTTP 203?

  57. Loop Tiling - HTTP 203

  58. Share Target - HTTP 203

  59. Context and Optimizations - HTTP 203

  60. JAM Stack - HTTP 203

  61. New Canvas Stuff - HTTP 203

  62. Background Fetch - HTTP 203

  63. Best web features of 2018: The Final! - HTTP203

  64. Best web features of 2018: Part 3/4 - HTTP203

  65. Best web features of 2018: Part 2/4 - HTTP203

  66. Best web features of 2018: Part 1/4 - HTTP203

  67. Old vs New JavaScript - HTTP203

  68. Page Lifecycle API - HTTP203

  69. SVG Transform Box - HTTP203

  70. JavaScript proposals - HTTP203

  71. Polyfills - HTTP203

  72. Broadcast channel - HTTP203

  73. CORB - HTTP203

  74. JavaScript for-loops are… complicated - HTTP203

  75. Lighthouse and Puppeteer - HTTP203

  76. What's new in JavaScript - HTTP203

  77. Google's Crawler & JavaScript - HTTP203

  78. Web Security - HTTP203

  79. What's New in Chrome DevTools - HTTP203

  80. Technical Debt - HTTP203

  81. Google Chrome Origins - HTTP203

  82. Web Dev Beginnings with Mariko Kosaka - HTTP203

  83. Accessibility with Rob Dodson - HTTP203

  84. PWA Starter Kit with Monica Dinculescu - HTTP203

  85. State of the Web with Ben Galbraith & Dion Almaer - HTTP203

  86. #SmooshGate - HTTP203

  87. Work Life Balance - HTTP203

  88. Class-based Tree Shaking - HTTP203

  89. Resize Observer - HTTP203

  90. JavaScript Symbols - HTTP203

  91. Webpack and Workers - HTTP203

  92. 120fps - HTTP203

  93. EventTarget - HTTP203

  94. Import() - HTTP203

  95. WebWorkers - HTTP203 Advent

  96. Transform Streams - HTTP203 Advent

  97. Dynamic Import() - HTTP203 Advent

  98. FetchObserver - HTTP203 Advent

  99. Async Iterators & Generators - HTTP203 Advent

  100. FlatMap & Flatten - HTTP203 Advent

  101. Template Instantiation - HTTP203 Advent

  102. Weightless CSS - HTTP203 Advent

  103. Web Architecture - HTTP203 Advent

  104. Animation Worklet - HTTP203 Advent

  105. Web Locks API - HTTP203 Advent

  106. Background Fetch - HTTP203 Advent

  107. WeakMaps - HTTP203

  108. Web RTC - HTTP203

  109. VDOM vs lit-html - HTTP203

  110. Visual Viewport - HTTP203

  111. Imposter Syndrome - HTTP203

  112. Web Standards & Flash - HTTP203

  113. HTTP203 Recap

  114. HTTP2 - HTTP203

  115. Libraries vs Frameworks - HTTP203

  116. Jake Beats Wikipedia - HTTP203

  117. Paul Built A Web App - HTTP203

  118. Season 3 Trailer - HTTP203

  119. The Future of JavaScript - HTTP203

  120. Maintainable Code - HTTP203

  121. Browser Monoculture - HTTP203

  122. HTTP 203: Utopia Vs Dystopia (S2, Ep6)

  123. HTTP 203: Performance Matters (S2, Ep5)

  124. HTTP 203: Progressive Loading (S2, Ep4)

  125. HTTP 203: CSS Triggers (S1, Ep1)

  126. HTTP 203: Web Vs Native (S2, Ep1)

  127. HTTP 203: Build tools (S2, Ep2)

  128. HTTP 203: HTTPS Everywhere (S2, Ep3)

  129. HTTP 203: Font Rendering (S1, Ep4)

  130. HTTP 203: Pointer Events (S1, Ep2)

  131. HTTP 203: Gotchas (S1, Ep6)

  132. HTTP 203: Frame Timing (S1, Ep3)

  133. HTTP 203: Christmas Special (S1, Ep5)

  134. HTTP 203: Season 2 Teaser