Product biographys & reflections - Sophievanderburg/ilojo-bar Wiki

Product biography



Reflection Gwen

Web App from scratch

  • We have a loading state
  • We write consistent and efficient HTML, CSS and JS
  • We use an API, made with prismic
  • We retrieve the data and manipulate it
  • We convert it to structured html

CSS to the rescue

I didn’t use a lot of new techniques, only scroll snap, but that wasn’t hard. I did use techniques I learned from CSS to the rescue, like animations, grid and before.

Progressive Webapps

  • We use serverside rendering
  • We use a service worker for an offline page
  • Made sure the performance is good

If you want to read more about this, you can read our

Browser technologies

We use @support and fallback fonts and made sure we started with html and went bigger from there.

Realtime web

We didn’t use this because it’s a static site.

Human center design

We didn’t really used this because the site is for a lot of people, but we did make sure it’s accessible on older devices and in English, so everyone can read it.

Reflection Sophie

:x: Web App from scratch

I did not use anything of this course as we used NodeJS for serverside rendering.

:heavy_check_mark: CSS to the rescue

I tried to do as much code with CSS instead of JavaScript. For example, the menu I made, was with CSS only. We did not use the menu in the end, but it was something new I learned this semester.

:heavy_check_mark: Progressive Webapps

  • Service worker:
    I created a service worker to cache the visited pages.
  • Server side rendering:
    We used NodeJS, Express & EJS to render the retrieved data into the pages.
  • Optimisation:
    We used NPM packages as compression & express-minify. And we used lighthouse to make out webapp as good as possible.

:heavy_check_mark: Browser technologies

  • Can I Use?:
    During this project, []( was our best friend. We made sure we checked every CSS feature we used. In case it was not supported everywhere, we used @supports.
  • @supports:
    We used @supports in case the feature is not supported in certain browsers. In some cases we also used @support not, to make fallback code.
  • Progressive Enhancement:
    On the send story page, we have added an extra confirm and an alert. We've done this so that people don't accidentally send their story before it's finished. The core functionality (sending your story) still works when the client side javascript fails. If the client side javascript works, the user experience is enhanced. This is what it looks like:

:x: Realtime web

I did not use any real time events, because it is a static page. It would be really cool if people could connect in real time, but for now it was not the goal of the webapp.

:heavy_check_mark: Human center design

This project we worked in sprints of a week. Each week we iterated on our prototype and tested it with our students and teacher as the real target audience was not available to us during the project. We also implemented the basic accessibility features.


⚠️ ** Fallback** ⚠️