Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FOUC, and the Death of Progressive Enhancement

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.

Kyle Simpson

September 13, 2019

More Decks by Kyle Simpson

Other Decks in Programming


  1. <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. Flawed: if the device can do it, the user wants

    it https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
  3. "[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/