FOUC, and the Death of Progressive Enhancement

35761e3936deba2f8189c2d20982c771?s=47 Kyle Simpson
September 13, 2019

FOUC, and the Death of Progressive Enhancement

Web developers have long heralded Progressive Enhancement for delivering web experiences in "layers" (HTML, images, CSS, and then JS). It sounds so obvious and elegant, right? But FOUC (Flash of Unstyled Content), exposes the lies we've been telling ourselves and users! It's time to peel back the layers and re-envision how the web is assembled.

35761e3936deba2f8189c2d20982c771?s=128

Kyle Simpson

September 13, 2019
Tweet

Transcript

  1. 7.

    <html> <body> <a id="hover-me">Hover Me!</a> </body> </html> #hover-me { background-color:

    #f00; color: #fff; } var btn = document.getElementById("hover-me"); btn.addEventListener("mouseover",openMenu); btn.addEventListener("mouseout",closeMenu); Separation of Concerns
  2. 17.
  3. 19.
  4. 21.
  5. 25.
  6. 28.
  7. 29.
  8. 38.

    Flawed: if the device can do it, the user wants

    it https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
  9. 49.
  10. 54.
  11. 60.
  12. 68.

    "[N]o one has disproved the benefits of Progressive Enhancement or

    proposed a better technique." https://www.sitepoint.com/javascript-dependency- backlash-myth-busting-progressive-enhancement/