Progressive Enhancement - wongsrila/intern-match GitHub Wiki

Progressive Enhancement is een krachtige methodologie waarmee webontwikkelaars zich kunnen concentreren op het bouwen van de best mogelijke websites. Progressive Enhancement is het principe van beginnen met een sterke basis en vervolgens verbeteringen toevoegen. Je voegt steeds een laag toe aan je bestaande project (HTML -> CSS -> JavaScript).

Een belangrijke rede van Progressive Enhancement is de kracht van het eindresultaat. Progressive Enhancement forceert je om het project in eerste instantie te plannen als een functioneel systeem met alleen de meest belangrijke technologieën. Hierdoor weet je altijd dat je een sterke basis hebt om op terug te vallen naarmate het project complexer worden.

Een voorbeeld van Progressive Enhancement is de principe "Release Early, release often". Als je een project met een goede basis uitbrengt dat goed werkt, kan je daarna focussen op de "enhancements". In mijn voorbeeld is dit de CSS en JavaScript.

Progressive Enhancement projecten zijn ook makkelijker te onderhouden. Ontwikkelaars kunnen focussen om complexe secties zonder zorgen te maken over een sterke basis.

In de praktijk is het het gemakkelijkst om het concept van Progressive Enhancement op te splitsen in verschillende lagen, waarbij elke laag voortbouwt op de vorige om de interactie met de website te verbeteren.

1. Het eerste laag is een schoon en semantisch correcte HTML. Hiermee kan screen readers, text-to-speech en robots goed door je website heen navigeren.

2. De volgende laag is het CSS, Hiermee maak je de opmaak mooier en aangenamer om te gebruiken voor de gebruiker.

3. Als laatst heb je JavaScript. Hiermee bied je gebruikers de mogelijkheid aan om de verbeterde functionaliteiten te gebruiken, die JavaScript aan hebben.

<form action="save_order.php" method="post">
        <fieldset>
            <legend>Order of Navigation</legend>
            <ol>
                <li id="homepage-12">Homepage <label for="menu-id-12">Change the order for Homepage</label><input type="text" name="homepage-12" id="menu-id-12" value="1" /></li>
                <li id="contact-23">Contact Us <label for="menu-id-23">Change the order for Contact Us</label><input type="text" name="contact-23"  id="menu-id-23" value="2" /></li>
                <li id="about-16">About Us <label for="menu-id-16">Change the order for About Us</label><input type="text" name="about-16"  id="menu-id-16" value="3" /></li>
                <li id="latest-14">Latest News <label for="menu-id-14">Change the order for Latest News</label><input type="text" name="latest-14"  id="menu-id-14" value="4" /></li>
            </ol>
        </fieldset>
        <p><input type="submit" value="Save new order" /></p>
    </form>

form {
  width: 50%;
  margin: 0 auto;
}

fieldset {
  background: #555555;
  padding: 1em;
}

legend {
  border: 1px #513939 solid;
  background: #FAFAFA;
}

label {
  position: absolute;
  margin-left: -999em;
}

ol {
  list-style: none;
  position: relative;
}
body {
  font: 100% serif;
}

input[type='text'] {
  width: 2em;
  text-align: center;
  position: absolute;
  left: 40%;
}

$(document).ready(function() {
    $(‘input’).hide();
    $(‘ol’).sortable({items: ‘li’,
        update: function(event, ui) {
            var new_order = $(‘ol’).sortable(‘toArray’);
            $.each(new_order, function(i, element) {
                $(‘input[name=‘+element+’]‘).attr(‘value’, i+1);
            });
            $.post(“save_order.php”, {
                ‘new_order’: $(‘form’).serialize()
            })
        }
    });
});

freeCodeCamp.org. (2018, 7 november). What is Progressive Enhancement, and why it matters. https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/

Progressive Enhancement: What It Is, And How To Use It? (2009, 22 april). Smashing Magazine. https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/