Introduction to Progressive Enhancement
Tags: beginners, css, javascript, html
Published: 2020-01-20 16:23:20

---
title: Introduction to Progressive Enhancement
published: true
description: The idea is to design your website(s) for your users and making coding and design decisions that will not affect the usability and accessibility of your content.
tags: beginners, css, javascript, html
series: FrontEnd Development Zero to Hero
---
<center><small>_This post was originally published on October 2<sup>nd</sup>, 2019. Edited and Published to fit the theme of this series_</small></center>

Most websites content are served with a combination of HTML, CSS and JavaScript. Your design and coding decision that ensure the content is presented in a _usable_ and _accessible_ form is one of the tenets of __progressive enhancement__. 

__It all starts by writing code that's guaranteed to run in most browsers__ and __enhancing it with code that might not run in all browsers__, and irrespective of your users browser, they will get the __baseline experience__ and __the content they came for__.

We took this approach in the layout example when we talked about [responsive web design](https://dev.to/ziizium/introduction-to-responsive-web-design-45g6). We started with a mobile `viewport` and then used media queries to progressively enhance the layout within different `viewport`.

__Progressive enhancement is about changing your mindset and approach when building websites or web applications__. One of the best way to understand is through practical examples.

Let's dive in.

<hr> 

We'll show how we can take a _progressive enhancement_ route when building with JavaScript and CSS.
  
###__FOR JAVASCRIPT__

Lets take an __hypothetical__ situation that you have a form on your _blog_ that allow users to submit comments to your blog post, it has _form inputs_ for the _name_, _email_ and a <abbr title="What You See Is What You Get">WYSIWYG</abbr> editor which allows the user to submit _code snippets_.

Most <abbr title="What You See Is What You Get">WYSIWYG</abbr> editor are __coded in JavaScript__, but what happens when your user access your website with JavaScript turned off in their browser? They will have no idea they can submit a code snippet along with their comments (_unless they've visited your website before_).

Save the following HTML:

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Progressive Enhancement</title>
	<link rel="stylesheet" href="form.css">
</head>
<body>
	<h2 class="comment-heading">Add a Comment</h2>
	<form class="comment-form" action="" method="post" id="commentform">
	    <fieldset>
		<div class="form-group">
		  <label for="name" class="form__label">Name:</label>
		  <input type="text" name="name" class="form__input" id="name" required>
		</div>

		<div class="form-group">
		  <label for="email" class="form__label">Email:</label>
		  <input type="email" name="email" class="form__input" id="email" required>
		</div>

		<div class="form-group w-100">
		  <label for="comment" class="form__label">Comment:</label>
		  <textarea name="comment" class="form__textarea" id="comment" </textarea>
        </div>

		<input type="submit" name="submit_comment" value="Submit Comment" class="form__button">
	    </fieldset>
	</form>

<script src="tinymce/tinymce.min.js"></script>
<script>
	tinymce.init({
		selector: '#comment',
		theme: 'modern',
		height: 300,
		autoresize_bottom_margin: 20,
		autoresize_max_height: 500,
		autoresize_min_height: 325,
		plugins: [
		    'advlist anchor autolink autoresize link spellchecker autosave',
		    'code',
		    'codesample code save'
		]
	});
</script>
</body>
</html>
```

Taking a closer look at the code i have referenced a script that's used for the WYSIWYG editor which is TinyMCE, [download a local copy](https://www.tiny.cloud/get-tiny/self-hosted/) of TinyMCE to your current working directory and update the value of the `src` in your `<script>` e.g "<em>your_current_working_directory/tinymce/tinymce.min.js</em>".

Create a CSS file and save the following:

```css
/**
  * CSS rules for styling the form
  */
.comment-heading {
    text-align: center;
}

.comment-form {
    margin-bottom: 1em;
    width: 100%;
}

.comment-form__noscript {
    display: block;
    margin-top: 0.8em;
}

@media screen and (min-width: 48em) {
    .comment-form {
       width: 60%;
       margin: 0 auto;
    }
}

.form__label,
.form__input,
.form__textarea {
    display: block;
    width: 100%;
    margin-bottom: 0.5em;
    padding: 0.3em;
}

.form__textarea {
    height: 13em;
}

.form-group.w-100 {
    margin-bottom: 1em;
}

.form__button {
    background-color: #1560bd;
    border: 0;
    color: #ffffff;
    font-family: "Trebuchet Ms", serif;
    margin: 0 auto;
    padding: 0.5em;
    width: 50%;
    display: block;
}

.form__button:hover {
    background-color: hsl(53.2, 4%, 41.2%);
    cursor: pointer;
    font-weight: bold;
    box-shadow:  0 2px 3px hsl(53.2, 4%, 41.2%);
}
```

Load the HTML file in your browser, and __if you have JavaScript enabled__ you should get an output similar to the image below:

![A form](https://thepracticaldev.s3.amazonaws.com/i/2a0ke59urvieioucoesj.png)

And if you click on the __Insert tab__, you will know you can submit a code snippet with your comment:

![A form with insert tab clicked](https://thepracticaldev.s3.amazonaws.com/i/11c3butawrq11kiq8lyl.png)

But what happens when the user has __JavaScript disabled__? __There will be no indication that code snippets can be submitted__:

![A form with JavaScript Disabled](https://thepracticaldev.s3.amazonaws.com/i/otr6za4iw6jztigs99px.png)

With just a few lines of code, we can fix this. First there should be an information just below the `textarea` telling the user that they can submit code snippets with their comments.

__By default this information will be hidden by JavaScript__ and if the user browser has JavaScript disabled they will see the information.

Copy the code below an paste just below the `textarea` element in the form. Then save your file.

```html
<i class="comment-form__noscript" id="comment-form__noscript">
Javascript is disabled in your browser. To submit a code snippet
along with your comment use a <code>pre</code> tag with a class
of language-(programming-language) and wrap your snippet
with html <code>code</code>
tag. e.g<pre>&lt;pre class="language-javascript"&gt; &lt;code&gt;var i = 1;&lt;/code&gt;
&lt;/pre&gt;</pre>
Replace 'javascript' in the class name with
either html, css or php. e.g language-css,
language-html or language-php</i>
```
Update the code within the `<script>` tag with these two lines of JavaScript which hides the information from users that have JavaScript enabled. __Place the code after the TinyMCE initialization code__.

```javascript
  // hide the form no script information
  let comment_form_noscript = document.getElementById('comment-form__noscript');

  // hide the information
  comment_form_noscript.style.display = 'none';
```
Save your HTML and CSS file. Reload in you browser, __if you have JavaScript enabled you will see the form with <abbr title="What You See Is What You Get">WYSIWYG</abbr> editor__.

Now let's disable JavaScript.

If you are using Windows&trade; you can access the _Developer Tools_ in Firefox and Chrome using <code><b>Ctrl</b> + <b>Shift</b> + <b>I</b></code> or the equivalent command in macOS.

__Click on Console__ and press the <b>F1</b> key on your keyboard to access the console settings, scroll down you should see '__Disable JavaScript__'  under __Advance settings__.

![Developer Console in FireFox Browser](https://thepracticaldev.s3.amazonaws.com/i/t08irrnq50wkztw2ny0r.PNG)

In the current FireFox browser, clicking on the __Disable JavaScript__ _checkbox_ will automatically reload the page and __in Chrome you'll have to manually reload the page__using the _Reload button_ or <code><b>Ctrl</b> + <b>R</b</code> on your keyboard.

When the page reloads, you should get an output similar to the image below, with the information displayed because JavaScript is disabled. Now the user knows they can submit code snippets with their comments.

![A form with information on submitting code snippets](https://thepracticaldev.s3.amazonaws.com/i/yjyiw1n3thhfopfkcdyq.png)

Other cases when the user might have JavaScript disabled:

1) If they are using the Opera Mini browser, which automatically strips out all scripts to increases the page load time

2) Using a proxy server that's configured to disable scripts.

###__FOR CSS__

We demonstrated progressive enhancement when `@media` rules was used to enhance the layout across different `viewport` in the [introductory post to responsive design](https://dev.to/ziizium/introduction-to-responsive-web-design-45g6).

The additional information we should discuss is the use of `@supports` feature to check if a browser will understand a particular CSS property. The basic usage is:

```css
@supports(display: flex) {
    /* All the code here will run in browser that supports flexbox*/
}
```

And if you are using a [CSS property](https://dev.to/ziizium/css-properties-2h1j) with limited support, be sure to provide a fallback code. [Can I use](https://caniuse.com/#cats=CSS) is a resource that will definitely come in handy.

Mind you, __these are just basic examples that demonstrates progressive enhancement__.

The idea is to design your website __for your users__ and making __coding and design decisions that will not affect the usability and accessibility__ of your site's content.

<span title="Graceful degradation: Graceful degradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers, but fall back to an experience that while not as good still delivers essential content and functionality in older browsers."><u>Graceful degradation</u></span> is related to progressive enhancement but different &mdash; often seen as going in the opposite direction to progressive enhancement. In reality both approaches are valid and can often complement one another ([source](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)).

<hr>

Our next topic is more of theory and it's about _User Interface Design_.

I'll see you then.