Product biographys %26 reflections - Sophievanderburg/ilojo-bar GitHub Wiki

• 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

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.

• 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 read.me.

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

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

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.

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

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.

• 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.

• Can I Use?:
  During this project, [aniuse.com](https://caniuse.com/) 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:

tekst