(FEND) Project 5: Restaurant Reviews App—Stage 1

by Tony Boswell

Project Overview

For the Restaurant Reviews projects, I was tasked to incrementally convert a static webpage to a mobile-ready web application. In Stage One, I had to take a static design that lacked accessibility and convert the design to be responsive on different sized displays and accessible for screen reader use. I was also tasked to begin converting this to a Progressive Web Application by caching some assets for offline use.

Specification

I was provided code for a restaurant reviews website. The code had a lot of issues. It was barely usable on a desktop browser, much less a mobile device. It also didn’t include any of the standard accessibility features, and it didn’t work offline at all. I had to update this code to resolve these issues while still maintaining the included functionality.

Server Implementation

To view the site, there are many options to choose from, but for live development/testing/editing purposes, I chose not to implement the Python server, but instead opted to use a package in atom - atom-live-server package. Which gave me an address of 127.0.0.1:3000. This can easily be changed in the dbhelper.js file to whatever address and port your server lives on.

If you opt to start up a simple HTTP server to serve up the site files on your local computer. Python has some simple tools to do this, and you don't even need to know Python. For most people, it's already installed on your computer.

In a terminal, check the version of Python you have: python -V. If you have Python 2.x, spin up the server with python -m SimpleHTTPServer 8000 (or some other port, if port 8000 is already in use.) For Python 3.x, you can use python3 -m http.server 8000. If you don't have Python installed, navigate to Python's website to download and install the software.

Once you have this setup and you have changed the address in the dbhelper.js file, then with your server running, visit the site: http://localhost:8000.

Project Requirements

• Make the provided site fully responsive. All of the page elements should be usable and visible in any viewport, including desktop, tablet, and mobile displays. Images shouldn't overlap, and page elements should wrap when the viewport is too small to display them side by side.

Steps to complete this task included:

1. Fork and clone the starter repository. The code in the repository served as my baseline to begin development.
2. I had to get a MapBox API key. Then replace the text <your MAPBOX API KEY HERE>inside of then main.js with my key. MapBox API was free to use, without providing any payment information.
3. Convert the provided site to use a responsive design .
   • Bootstrap and other CSS frameworks could not be used; all responsiveness should be done with CSS. ( I should have paid better attention to this instruction as my first attempt was completed with Bootstrap...I had to go back and redo this part :| )
   • Use appropriate document type declaration and viewport tags
   • Create a responsive grid-based layout using CSS
   • Use media queries that provide fluid breakpoints across different screen sizes
   • Use responsive images that adjust for the dimensions and resolution of any mobile device

• Make the site accessible. Using what you've learned about web accessibility, ensure that alt attributes are present and descriptive for images. Add screen-reader-only attributes when appropriate to add useful supplementary text. Use semantic markup where possible, and aria attributes when semantic markup is not feasible.

Step for this task:

1. Implement accessibility features in the site HTML (most of this HTML is generated by JavaScript functions), where I heavily utilized a http://karlgroves-sandbox.com/CheatSheets/ARIA-Cheatsheet.html as reference in my A11y implementation.
2. At this point I also had to change the entire CSS color theme in order to adhere to the contrast guidelines set by A11y standards.

For my final task, I was asked to make the app offline first.

• Cache the static site for offline use. Using Cache API and a ServiceWorker, cache the data for the website so that any page (including images) that has been visited is accessible offline.

Step to complete this task:

1. Add a ServiceWorker script to cache requests to all of the site’s assets so that any page that has been visited by a user will be accessible when the user is offline. Only caching needs to be implemented, no other ServiceWorker features.

For this particular section, I utilized the previous lessons notes I had taken during the service worker module, but also Google's Service Workers: an Introduction as a primer.

Note about ES6

As much as possible, I tried to maintain use of ES6 in any additional JavaScript I wrote.