Talk with Joost

Joost talked to us about the product presentation on friday plus about our documentation. After that he gaves us feedback about our product. He said that a zero state should be clear for the users on how to use the website. The user should see what actions he can use and the result it will bring. With our scroll down animation on the home page, it isn't clear where the scroll leads to. So we need to give a short explantion where it scrolls to. Plus he said that a nice introduction about the Ilojo bar would be nice, because now it isn't clear what the building exactly was.

Talk with the client

Femke is still impressed by our work and is happy with the results. She liked the images we had in the windows. The only thing she wanted to be improved is the story page, sadly we didn't have time to focus on it. We looked at it, but it is difficult to add styling to the story pages. We have a structure built with prismic but this way it can be challenging to add custom styling. She also mentioned to make the font size bigger to make it more readable.

My part

Bug Scrolling

We had a small issue that if you scroll on the home page and you scroll a bit hard, it goes back. I fixed this by changing the snap to 1 in the timeline. This means it snaps with the closest increment of 1.

Caching

Caching is a great way to improve the performance if you visit the site repeatedly. If you visit the site it caches the core, which is our JS, images, fonts and css, plus it caches the HTML pages you have visited. For the caching strategy we chose 'stale while revalidate'. This strategy means that if a request can be loaded from the caching it will be done this way. Otherwise it will run a fetch in the background to save it in the cache, this way your site wil be up to date with a delay of 1 refresh. This way it will load almost instant if you have visited the page before. Another great thing about caching is that if you are offline, but you have visited a page beforehand when you were online, it will still load. This is because it is cached in your local storage.

self.addEventListener('fetch', function(event) {

    if (isCoreGetRequest(event.request)) {
        //Pakt meteen de cache versie
        event.respondWith(
          caches.open(CORE)
            .then(cache => cache.match(event.request.url))
        )
    } else if (isHtmlGetRequest(event.request)) {
        //Pakt cache als die er is, ondertussen nieuwe versie in cache opslaan
        event.respondWith(
        caches.match(event.request.url)
            .then(response => {
                if (response) {
                    event.waitUntil(
                        fetchAndCache(event.request.url, 'html-cache')
                    )
                    return response
                } else {
                    return fetchAndCache(event.request.url, 'html-cache')
                }
            })
            .catch(e => {
            return caches.open(CORE)
                .then(cache => cache.match('/offline'))
            })
        )
    } else if (isOtherGetRequest(event.request)) {
        event.respondWith(
            fetch(event.request)
                .then(response => {
                    return response;
                })
                .catch(e => {
                    return caches.open(CORE)
                        .then(cache => cache.match('/offline'))
                })
        )

    }
});

We also cache everything besides the HTML pages for a year. This is great for our images or other elements on the site, that do not change often. It does not have to load everytime we load the page again. Plus why not cache it if it doesn't change that often.

app.use(function(req, res, next) {
    if (req.method == "GET" && !(req.rawHeaders.toString().includes("text/html"))) {
        res.set("Cache-control", "public, max-age=31536000")
    }
    next()
})

Accessibility

Our app had a bad score on accessibility. This was because we had no alt texts on our images. So I added some alt texts to the images. The only problem was that we loaded images from prismic. So I added alt text to the images in prismic and in Javascript added them. Worked on accessibility,

<img src="<%= alinea.image.url %>" alt="<%= alinea.image.alt %>">

This gave us this score:

There was only one thing that didn't work, which lighthouse didn't measure. The clicking enter while tabbing, didn't work, because I added only a click function to the navigation. So I added a check if enter is clicked, which it then goes to the onClick function. Sadly I saw that you could tab through the menu when it wasn't shown. So I changed the tabIndex to -1 when the menu isn't shown to fix this.

menuBtn.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
      event.preventDefault();
      openNav()
    }
  });