Product Biography 📚 - ppijn/ilojo-bar Wiki

Welcome to the ilojobar wiki!

ilojobarfallback

Product Biography 📚

Link to the Project Board

Sprint 1ī¸âƒŖ

Monday 23/05/2022

  • A lot of research into the building and the culture they had back then.
  • First meeting with Femke van der Zeijl, Legacy
  • Assigned contact person (Sophie)
  • We were given more information after a few rounds of questions.
  • She told us we were going to receive more documents about the Ilojo bar, Like drawings of the building and the magazine with text

Ilojo-bar-measurements.pdf

Tuesday 24/05/2022

On the Tuesday we had to create a debriefing for the project. Julian and I created the debrief:

Debriefing Ilojo Bar - Julian en Pepijn.pdf

Wednesday 25/05/2022

We also started to create a few first sketches and brainstormed on ideas. image

We decided we want to combine the two concepts: The AR and 3D function of the first concept and the barman idea of the second concept. We wanted to do it a little bit different then what the other groups were doing. Femke herself had an idea of having the stories be told throughout the windows, so the first thought was of course to do that. But we decided to chose the barman since it was more original and we preferred that idea much more.

Sprint 2ī¸âƒŖ

Monday 30/05/2022

We wanted to create a 3d version of the building, but since this takes quite a lot of time and effort to not only learn Blender but also create the model, we decided to go to Fiverr and pay someone to make the 3D building for us. I went looking through Fiverr and found the perfect person. She created low poly versions of buildings and I asked her if she was interested. And she was! I created a brief for her and she finished it within 2 days. Fiverr Brief.pdf

Tuesday 31/05/2022

While waiting for the model we were testing and trying a lot with three.js since this was something we had zero experience with. And before we implemented the model it was good to know how three.js works to see if we could fix it and afterwards easily change the files so that the model would be there instantly.

Wednesday 01/06/2022

Still testing with three.js While Julian was continuing with the testing, I created the barman illustration in figma image

Thursday 02/06/2022

Created a parallax effect on the bar so it moves smoothly with your cursor and put it in the website.

<div id="scene">
          <div data-depth="-0.25">
            <img
              src="img/lamps.svg"
              alt="Lamps on top of the bar"
              class="lamps"
            />
          </div>
          <div data-depth="-0.12">
            <img src="img/Union.svg" alt="text bubble" class="bubble" />
          </div>
          <div data-depth="-0.1">
            <img src="img/barman.svg" alt="Barman" class="man" />
          </div>
          <div data-depth="0.15">
            <img src="img/bar.svg" alt="Bar with drinks" class="bar" />
          </div>
          <div data-depth="0.25">
            <img src="img/stools.svg" alt="Stools to sit on" class="stools" />
          </div>
        </div>

And a very small bit of JavaScript

var scene = document.getElementById("scene");
var parallaxInstance = new Parallax(scene);

I implemented a framework for the Parallax effect, and with the data-depth element in the html I was able to create the effect of parallax.

Friday 03/06/2022

On Friday we combined the two pages with each other. The home page included the 3d model which we finally were able to implement and also a 2d fallback version. When you click on the building you get redirected to the bar.

Later that day we had another meeting with Femke in which we, and the others, showed our prototypes so far and she gave us some feedback. She was very enthusiastic and gave us the thumbs up to continue. We of course have a long way to go and are definitely going to do a lot in the next sprint image

I implemented the toggle to switch between 3d and 2d.

<form>
   <label class="switch">
        <input type="checkbox" />
        <span class="slider round"></span>
   </label>
</form>
.switch {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--beige);
  box-shadow: inset 2px 2px 10px var(--brown);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:focus {
  box-shadow: inset 2px 2px 10px var(--brown);
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--brown);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--brown);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
Sprint 3ī¸âƒŖ

Tuesday 07/06/2022

We worked from home and I did some more designing on all the pages

Wednesday 08/06/2022

We had two reviews today: Code review and Design review. From this feedback we created a lot of issues and already improved on the design immediately

image

Thursday 09/06/2022

Today I made a few more designs for both the homepage and the story page. This will be shown tomorrow during the 3rd meeting with Femke. I will discuss what she likes with her and what to change. She wanted environment during the last session so that's what we added but what she thinks of it will be discussed tomorrow.

image

Friday 10/06/2022

We were supposed to have a meeting with Femke but sadly she couldn't be there (Due to the differences in the Nigerian time and Dutch time)

Sprint 4ī¸âƒŖ

Monday 13/06/2022

Due to the missed meeting with Femke on the friday before, the meeting was replaced to the monday. The meeting went very good, we discussed our new design and she really liked it. There were some points that I wanted her opinion on and she gave it very clearly, the colors of the sign are going to be the original colors that the sign had in real life.

image

Tuesday 14/06/2022

Today I started our coding of the new design. Meanwhile, Julian was finalizing the stories and we combined our codes. It was a very productive day and we got done a lot. We still have some work to do but we definitely are on the right track. Tomorrow and Thursday we have some reviews on both the coding and the design.

Wednesday 15/06/2022

Today we had the code review and it went pretty good. I had some issues with the code and couldn't figure it out so the code review was actually pretty useful. The teacher looked at it and helped me a bit and together we figured it out. For some reason it didn't work because of the z-index that we put on an a.

main section:first-child {
  position: relative;
  width: 100vw;
}

main section:first-child img:first-child {
  width: 100%;
  z-index: 2;
  height: auto;
  position: relative;
  pointer-events: none;
}

Thursday 16/06/2022

Implemented the new bar designs and finalized it together with the stories, we finally got the hang of pushing and pulling and merging branches. I designed and coded the Loading state for our project, which can be found in this codepen: Loading state

Sprint 5ī¸âƒŖ

Monday 20/06/2022

The last week was all about finishing up the project and putting the final touches to our project. We had our last meeting with Femke, we didn't have much to tell her but it went okay.Today we focused on performance and responsiveness for mobile. We scaled all the pictures down since our progressiveness was around 41 which is really bad. To improve on it we needed to compress our images to a right size. We did this and we still saw that our progressiveness is only 51 so the pictures didn't improve anything. Turns out we needed to change from svg to png since svg somehow still takes more time to load. We had the last standup with Joost and he told us that we had to make it more clear where to click for the viewer. it needed to be very simple and immediately understandable to use for people who haven't seen the project yet. I added a small animation to the Ilojo Bar building so that the user knows that they have to click on that.

@keyframes lift {
  0% { transform: translateY(0); }
  5% { transform: translateY(-10px); } 
  10% { transform: rotate(2deg); }
  15% { transform: rotate(-2deg); }
  20% { transform: translateY(1px); }
  30% { transform: translateY(0); }
  40% { transform: translateY(0); }
  100% { transform: translateY(0); } 
}

As for the Bar area we forgot to add a small sentence from the barman that said: "let me tell you a story about..." so the viewers know that the stories come from the Barman.

Tuesday 21/06/2022

Today started out rough since during one of our merges something went wrong, and all our process got deleted and our code reverted to a way older version. So we had to start our day with reverting the code back to the version we ended on. This took quite some time and Julian and I worked on it together to figure it out.

Wednesday 22/06/2022

Today we wanted to implemented a service worker and focus on progressive enhancement. Since we chaned the images to WebP format we needed to create a fallback option if the browser doesn't support WebP. The first thing it gets is the source and for the fallback it gets the img

  <img src="img/ilojobar.png" srcset="img/ilojobar.webp" alt="ilojo bar building"/> 

and we implemented a simple service worker so that cashing works. This would be very good since the internet in Nigeria isn't the best and with a service worker they would be able to view it offline as well. I updated the README.md and the Design Rationale and also went back in the Product Biography.

Thursday 23/06/2022

Today it was the last day and we wanted to really tidy up the project. We finished the documentation and uploaded the project onto heroku.

'''link to heroku '''

Reflection

Web App from Scratch 🔜
  • Used correct design principles
  • Code structure in the CSS and semantically correct HTML
  • It also works on GitHub
CSS to the rescue 🎨
  • I added an animation using @keyframes, I have never really tried it before.
  • Made sure it is really nicely useable wit hovers and focus states
Progressive Web App đŸ–Ĩ
  • We added an service worker
performance
Browser Technologies 📱
  • Made it progressive enhancement, we made sure it also works without JavaScript and CSS. The main function works.
  • We added AR just for the extra but of course we didn't need it.
  • We tested it on the corresponding browsers that they use in Nigeria: Chrome (50%), Opera (30%), Safari (8%).
  • added an @supports since not every browser support ...
Realtime Web ⌚
  • There was nothing to implement from Realtime web.
Human Centered Design 👩‍đŸĻ¯
  • We made it fit to the target audience really good
  • However, we couldn't test it since our target audience is based in Nigeria, and we can't just go there sadly.
⚠ī¸ **GitHub.com Fallback** ⚠ī¸