• 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

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

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

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.

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

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.

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

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.

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

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%;
}

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

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

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.

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)

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.

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.

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;
}

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

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.

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.

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.

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 '''

I keep sayin that I am new to this whole coding stuff, but I have to since I learned so much since the beginning of this minor. For this course in particular, I learned how to keep my code clean and keep the structure nice and use semantically correct HTML. With JavaScript, I had to learn everything from scratch. During this course I learned how to keep my JavaScript pretty using modules. This is something I am definitely going to keep doing in the future. I really like designing, but I can sometimes do it a little too much. Not making sense in the structure and keep a nice hierarchy. Lead the readers to a certain point. We learned what an API is, well at least I did, and learned how to implement it into your website.

Conclusion:

Seeing how a basic structure works and learning right from the beginning how to keep your code structured and not making it messy was very helpful.

CSS was already my favorite part of coding, I really like giving the website its life and there is no better way to do that then CSS. Other then that CSS has its many different ways to use it. The thing I learned and liked to challenge myself on was 3d transformation. I chose to challenge myself since I wanted to get better at CSS. I learned multiple new techniques like nth:child :root var() calc() and many more. I really enjoyed this course and learned a lot. I realized that starting over is not only a bad feeling but also a really helpful feeling.

During the Meesterproef, I really enjoyed putting my CSS knowledge into the project and also still learning more everyday, like pointer-events filter(). I love creating interactions using CSS on hover or add nice little details like animations to unnecessary things.

Conclusion:

CSS is my strongest side but I still struggle on most bits. CSS is something I really like focusing on and I would chose CSS above JS instantly.

Making your apps performance is key. During this course we learned to work with Node.js, and how to render HTML using EJS. I would say this course together with Browser Technologies and Human Centered Design were most useful during our Meesterproef. In Nigeria the internet connection isn't the best, so since we now knew how to implement service workers and learned how to improve your websites performance this came in really handy during the project. Now, people in Lagos can even view our website without having any internet connection (if they already visited the website before).

I never knew performance was something developers look into at all, I now know that this and accessibility are some things that are a giant must when creating your website. I for some reason kind of like looking at the performance of a website. It makes it so much nicer to experience.

Conclusion:

I learned the difference between client and server side and now know when to use server side and when client side and why it is good for some aspects.

• We added an service worker

The goal of this course is to make your website useable for everyone, whether they are using the newest browser or even the oldest, if they have the fastest mobile or the slowest. This course wants you to really take those in mind that don't have it all like we have here for example. The people in Nigeria can sometimes not have it all. So this course was very important for our project, we needed to keep in mind which devices they use mostly and what browsers they will visit the website on. We made sure to test it on other devices and on the main browsers they use there.

I enjoyed this course since it didn't require me to know everything about JavaScript but actually to try and keep away from it as much as possible and only add it when necessary or when you want to further liven your website after the core functionality is done. We were really careful when coding since we didn't want the website to now work there. Keeping the website simple yet original and functional. Our CSS actually didn't need much repairing since it was already very well supported.

Conclusion:

Making sure your website is useable for each and every user is key to having a good website. I really enjoyed finicking and testing my app to see what works best and in the end it came out very well supported.

This course was extremely fun and I learned a lot during this course. I learned how to make your website multi-user friendly and I never imagined that I was capable of creating such a fun game myself using the techniques learned in this course. Having so much freedom in deciding your ideas was the most fun I had with a course this minor. As for the Meesterproef project, we didn't get to implement anything that this course had to offer. We didn't have to make it so that you could chat or anything like that, which was really sad. If there was something cool to implement in the website that involved real-time events, I would've definitely done so but sadly that was not the case.

Conclusion:

This course was so much fun and it really was something that I want to work with later when I will create my own work. I can look back as this project and be very proud of it the most since I really put a lot of effort in it and I really like the result

I didn't really like this course at first, since it didn't involve that much of the things I like. We were given a case of an individual that we had to create a project for, and I was given someone with a very bad eyesight. Immediately I was bummed about it since I LOVE designing so much. But in the end, this is something I actually really enjoyed. My original studies is all about testing and prototyping and I remembered how much fun it is just to talk with the people and see their smile when they like it.

Conclusion:

I would've loved to use this course in the Meesterproef but since our target audience were Nigerians we really didn't get the chance to do so. However, I still feel like we connected with the people of Nigeria and really put their feelings into our project.