What is Progressive Enhancement?

Progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.

The word progressive in progressive enhancement means creating a design that achieves a simpler-but-still-usable experience for users of older browsers and devices with limited capabilities, while at the same time being a design that progresses the user experience up to a more-compelling, fully-featured experience for users of newer browsers and devices with richer capabilities. - MDN Web Docs

Some examples

Web Fonts

Web fonts are amazing and beautiful, but when the user is on a slow network with a heavy site, they surely degrades the user experience. Even in this situation, System font should be used as the fallback to render content and can be changed to a web font as and when they are loaded.

Initial HTML

Sites are loaded with script. When these scripts are responsible for initial content display, your user will be seeing the blank page on the browser or device when something went wrong with scripts or when the user is on the slow network.

It’s good to consider loading initial content from HTML to provide a better user experience, rather than completely relying on scripts which need to load in.

Feature Check

When using a feature which is not supported based on different browsers or devices, always check if the feature is available in the browser before using it in your JavaScript.

How did I use it?

When a user does not check the terms and conditions, but wants to create an account, I want to prevent this until the checkbox is checked.

You can do this with the HTML element required. You put this in the input. When the submit button is clicked whithout checking the checkbox, a message will appear stating that you must first agree to the terms and conditions. HTML is supported by almost everything so any user of the application will be able to use the form and receive corresponding error messages. This is what the application looks like without JavaScript:

After that you can overwrite with JavaScript. You do this using .removeAttribute. If you want JavaScript to be supported, you want to improve the user experience with JavaScript. With JavaScript you can check if the checkbox is checked and if that is not the case you can disable the button or simply don't let the user submit the form. I chose to disable the button because this is for a better user experience the user knows right away they can't register because they did'nt accept the terms and conditions instead of submitting de form and then wait for the feedback that they did'nt check the checkbox. When JavaScript is properly supported, the user experience will be progressively improved. This is what the application looks like with JavaScript:

API

I also use an API for random advice, when the user is logged in it shows a random advice when you refresh the page the code for this api is as followed:

const resDiv = document.querySelector('#results');

 
window.onload = () => {
  getAdvice();
};
 
 
 
function getAdvice() {
 
  fetch('https://api.adviceslip.com/advice').then(response => {
    return response.json();
  }).then(adviceData => {
    const Adviceobj = adviceData.slip;
    resDiv.innerHTML = `<p>"${Adviceobj.advice}"</p>`;
  }).catch(error => {
    console.log(error);
  });
 
}

---

Sources:

• MDN Web Docs
• The power of Progressive Enhancement