HTTP 203
Avoiding layout shift by putting the CSS in charge

Avoiding layout shift by putting the CSS in charge

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. Is .css a bad idea? Is inlining the way forward?

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

  3. Building VR and AR experiences using HTML

  4. Cross-fading DOM elements

  5. Generating your color palette in CSS

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

  7. Bringing bounce and elastic easing to CSS

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

  9. Are SPAs better than MPAs?

  10. Avoiding layout shift by putting the CSS in charge

  11. Color Spaces: Do YOU know the difference between sRGB, LAB and CIE XYZ?

  12. Random paint effects

  13. Deno

  14. Debugging memory leaks

  15. Season 8 trailer

  16. Top 10 performance pitfalls

  17. From nothin’ to gzip

  18. Progressively loading images

  19. Conducting tech interviews

  20. AssemblyScript

  21. The big back button quiz

  22. Writing Good Alt Text

  23. Scheduling Tasks

  24. JavaScript counters the hard way

  25. Dithering

  26. Importing JSON - ABANDONED

  27. Web animation gotchas

  28. WebAssembly Threads

  29. Slashing layout cost with content-visibility

  30. 3.143 ways to synchronize data across documents

  31. Weak JavaScript

  32. Streaming requests with fetch

  33. Socially Distant HTTP 203

  34. Cross-origin fetches

  35. Surma’s Interop Adventure

  36. Humans can't read URLs. How can we fix it?

  37. Is reduce() bad?

  38. The best web feature of 2019: Part 4/4

  39. The best web feature of 2019: Part 3/4

  40. The best web feature of 2019: Part 2/4

  41. The best web feature of 2019: Part 1/4

  42. WebAssembly Interface Types

  43. Import maps

  44. Push Notifications

  45. Is postMessage slow?

  46. Scope in JavaScript

  47. Handling updates offline-first

  48. Four silly browser hacks

  49. How we got into web development

  50. Changing web standards

  51. Solving Clickjacking

  52. But… why HTTP 203?

  53. Loop Tiling

  54. Share Target

  55. Context and Optimizations

  56. JAM Stack

  57. New Canvas Stuff

  58. Background Fetch

  59. Best web features of 2018: The Final!

  60. Best web features of 2018: Part 3/4

  61. Best web features of 2018: Part 2/4

  62. Best web features of 2018: Part 1/4

  63. Old vs New JavaScript

  64. Page Lifecycle API

  65. SVG Transform Box

  66. JavaScript proposals

  67. Polyfills

  68. Broadcast channel

  69. CORB

  70. JavaScript for-loops are… complicated

  71. Lighthouse and Puppeteer

  72. What's new in JavaScript

  73. Google's Crawler & JavaScript

  74. Web Security

  75. What's New in Chrome DevTools

  76. Technical Debt

  77. Google Chrome Origins

  78. Web Dev Beginnings with Mariko Kosaka

  79. Accessibility with Rob Dodson

  80. PWA Starter Kit with Monica Dinculescu

  81. State of the Web with Ben Galbraith & Dion Almaer

  82. #SmooshGate

  83. Work Life Balance

  84. Class-based Tree Shaking

  85. Resize Observer

  86. JavaScript Symbols

  87. Webpack and Workers

  88. 120fps

  89. EventTarget

  90. Import()

  91. WebWorkers

  92. Transform Streams

  93. Dynamic Import()

  94. FetchObserver

  95. Async Iterators & Generators

  96. FlatMap & Flatten

  97. Template Instantiation

  98. Weightless CSS

  99. Web Architecture

  100. Animation Worklet

  101. Web Locks API

  102. WeakMaps

  103. Web RTC

  104. VDOM vs lit-html

  105. Visual Viewport

  106. Imposter Syndrome

  107. Web Standards & Flash

  108. HTTP203 Recap

  109. HTTP2

  110. Libraries vs Frameworks

  111. Jake Beats Wikipedia

  112. Paul Built A Web App

  113. Season 3 Trailer

  114. The Future of JavaScript

  115. Maintainable Code

  116. Browser Monoculture

  117. Utopia Vs Dystopia

  118. Performance Matters

  119. Progressive Loading

  120. CSS Triggers

  121. Web Vs Native

  122. Build tools

  123. HTTPS Everywhere

  124. Font Rendering

  125. Pointer Events

  126. Gotchas

  127. Frame Timing

  128. Christmas Special

  129. Season 2 Teaser