Enhancement
Decide which parts of your website are most important for the user and make sure these parts will always work, no matter if the CSS or Javascript is not loaded in yet.
The first layer is the base of the cake, it is important to make sure this layer will always function, even without the styling and JavaScript. This is the most boring layer and you would almost never want to show this blank peace of code to the user, but it happens that all the styling and scripts stop working and the user should than still be able to complete the tasks wanted to achieve on the website in the first place.
The second progressive enhancement layer is the styling, also known as CSS. This makes the cake way more attractive to look at and maybe make certain focal point stand out more. When the browser does not recognize the CSS it will just ignore it, the HTML will still work.
The third and last layer is the JavaScript. It is important to ask yourself if you really do need JavaScript for your website. If that is a positive make sure you always check if everything you are using to implement the JavaScript is available. Are you using a certain API? Make sure it is still working to prevent from any errors to occur. Older versions of browsers will not always have java script function integrated and cannot read these. Make sure to check if these JavaScript function are available, before you load in the code and get a bunch of errors.
if('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// bootstrap the javascript application
}
"Using semantic markup from the beginning ensures that your site is not only going to work in any browser, but that it’s also going to be understood by search engines and screen readers alike."
Do not "over code", only using HTML and CSS has a lot lower percentage of any errors occurring in opposite of JavaScript. Programs written in JavaScript have simply more ways of errors to occur because of its complexity.
There are a lot of ways to pursue progressive enhancement, in the following part I will explain how I applied progressive enhancement to my case.
-
Dwyer, S. (2009, 22 april). Progressive Enhancement: What It Is, And How To Use It? Smashing Magazine. https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/
-
Tse, T. (2017, 15 februari). What is Progressive Enhancement and Why Should You Care? Shopify. https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care
-
You Gotta Love Frontend. (2019, 4 juni). FOUC, and the Death of Progressive Enhancement [Video]. YouTube. https://www.youtube.com/watch?v=SiYFh7wutTI&t=1550s
