Squid A - Team 1

Progressive enhancement means you make sure the core functionality works, and then you add extra features when the browser can handle these features.

• Functional (HTML)

  

• Usable (CSS)

  

• Pleasurable (JS)

  

What are the core principles of Progressive Enhancement? (4)

• 1. Basic content should be accessible to ALL web browsers
• 2. Basic functionality should be accessible to ALL web browsers
• 3. Semantic markup contains all content
• 4. Use only CSS thats externally linked (ouch! my Vue!)
• 5. Use only JS thats externally linked (ouch! my Vue!)
• 6. Respect end user Web preferences (be a nice dev/des)

What can we use to Enhance Progressively??!

• @Supports
• Modernizr
• Responsive Layout
• Feedback to the user
• Behavioral JS seperated from content
• HTML nomodule property
• HTML <\noscript>
• All Semantic HTML

Code Examples

• @media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
• if (browser === "the-one-they-make-you-use-at-work"){
getTheOldLameExperience();
} else {
showOffAwesomeNewFeature();
}
• @supports (display: grid) {
.main {
display: grid;
}
}
• if (document.addEventListener) {
// Eventlistener exists
infoContainer.addEventListener('click', toggleInfo);
} else if (document.attachEvent) {
// Eventlistener does not exist, instead use attachEvent
infoContainer.attachEvent('onclick', toggleInfo);
}

Gracefull Degradation

In this article (9), Aaron starts to explain how initially developers used a more graceful degradation approach to developing websites. He explains that both graceful degradation and progressive enhancement take into account how well a site may work in different browsers and on different devices. The distinction lies in where each of the methods places its focus.

With graceful degradation a developer caters more to users who are using the latest/capable browsers. Less time is spent on users who have less capable browsers. The developer may do some work to prevent users in older browsers from not being able the view the site, but that's about it.

References

• 1. https://blog.logrocket.com/a-quick-introduction-to-progressive-enhancement

• 2. https://alistapart.com/article/understandingprogressiveenhancement/

• 3. https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

• 4. https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/

• 5. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#testing_for_availability

• 6. https://modernizr.com/docs

• 7. https://hiddedevries.nl/en/blog/2015-04-03-progressive-enhancement-with-handlers-and-enhancers

• 8. https://caniuse.com/

• 9. https://alistapart.com/article/understandingprogressiveenhancement/