Research PE - mikehov/Dating-app GitHub Wiki

Mike Hovenier | Tech-4

Progressive Enhancement is if something goes wrong, there is a solution that will work, see it as a plan-B. A good example is a elevator, a elevator is basically useless if its not working, but you can always take the stairs. So if you are for example on a website in your browser, but the JavaScript stopped working. The Progressive Enhancement method will try to keep the website working. The goal is to make it accessiable to everyone. This is important cause everyone uses different browsers and applications with different connections. Sometimes people don't have a good connection to the internet, some people are using your website on a really small and old device. If you apply the Progressive Enhancement method correctly, almost everyone should be able to use your website without problems. A good example of Progressive Enhancement are Web fonts. If the font isn't loading, you can have back-up fonts that will also work to support your styling. You start from the start, so from the bottom to the top and not the opposite.

All with all, Progressive Enhancements is a web method to make information still accessiable to everyone no matter what the condition of your browser or connection is. Start making things from the bottom, then to the top. It's hard designing an house if your structure is messed up.

To keep the swiping feature working, I want it to be running even if the Javascript ain't working properly. Underneath is an small example of the code:

<form action="#" method="get" id="swipeform">
    <ul>
        <li>
           <button type="submit" class="liking-btn" name="dislike-btn" value="Dislike">
              <i class="icon">
                <svg></svg>
              </i>
            </button>
            <button type="submit" class="liking-btn" name="superlike-btn" value="Superlike">
              <i class="icon">
                <svg></svg>
              </i>
            </button>
            <button type="submit" class="liking-btn" name="like-btn" value="Like">
              <i class="icon">
                <svg></svg>
             </i>
         </button>
      </li>
   </ul>
</form>

So they all have a different value to send to the server.

This what browser will look like with or without JavaScript.

• Wireframes states

Lessons in class.

video2brain. (n.d.). Progressive Enhancement. Retrieved May 11, 2020, from https://www.youtube.com/watch?v=U38dyJhpUnA