Reflection Joeri

Over the past five weeks I have been working on the Bubble-Machine case with my teammates Nora, Remco and Tim. For this case, the goal was to make a new frontend interface for the existing application that is more user-friendly. We're working together with other students from the UX minor. Together we're also responsible for making different and more understandable graphs for the end user.

Looking back on the past five weeks of hard work, to achieve our goal, a sense of pride lingers. I will explain this sense of pride by:

• Process
• Collaboration
• Applied techniques

Process

Looking back on the first day of the Master's Test I did not expect that we would end up with the prototype that we have now. The documentation we had to read about filter bubbles and the Bubble Machine initially scared me. I thought to myself how are we ever going to build a usable application around this that displays data in a user-friendly way.

Along the way, I have approached small parts of the application and experimented with them to master the techniques. For example working with D3 and writing a lot of clientside JavaScript code.

In advance I expected to work a lot on the server, but in the end I did this minimally. I learned a lot especially with the functionalities to create and delete sessions. Normally i would write those functions serverside but for this project clientside was prefered. I'm glad I was able to write these functions on the client side because I gained a lot of new knowledge about this. I would not have had this if I had written the code server side via a template engine as usual

Looking at working with D3, I gained a lot of new knowledge by experimenting a lot. But i didn't made big steps until I sat down to read the D3 documentation.

I went through a nice process in which I grew in knowledge of techniques and also learned more about myself. I prefer to immediately start with new techniques and experiment on my own, a pitfall for myself here is that I continue experimenting for too long and achieve nothing concrete. I also want to take into account that I have to take the time to read documentation before I get started with a new technique, because of this you understand the basics better and you can take steps more easily.

Collaboration

Not often have I experienced a more pleasant collaboration than with this project. From day one there was a comfortable and positive atmosphere where everyone could freely express their wishes. By immediately making agreements with each other about how we would proceed, we prevented unequal distributions later in the project or that I or other team members were left out.

In the past five weeks we have had no problems with each other. Looking at my own contribution to the collaboration in this project, I dare to say that I have often taken the lead. The moments when I took the lead were during group meetings, I carefully took into account that there was room for everyone to come up with ideas and that everyone felt heard.

What I would do differently next time is contribute more to maintaining issues and tasks in the project board, for example. I have contributed less to this now than I would have liked. This is because I mainly focused on the technique and experimenting with the technique, I could have found a better balance for myself between documentation and coding.

Collaboration with the client

In addition to the collaboration with my team members, I also look back positively on the collaboration with the clients: Yuri Westplat and Marcio Fuckner. We had weekly sessions with the clients to discuss progress. this often provided useful feedback and gave us the opportunity to ask questions.

What I have done well in the collaboration with the client is daring to ask questions. When something didn't work with the API, if I didn't understand something or if I wanted to see a new function in the API, I didn't hesitate to write a message to Marcio on Teams. Marcio usually responded quickly to messages, which helped me further. He also indicating that my input was helpful for him because it gave him insight in bugs and new functions in and for the API which he otherwise could have overlooked.

What I could have done better in the collaboration is prepare myself more before a meetings with the clients so that I could have asked more specific questions. Now it often happened that after the meeting I had questions that I could have asked in the meeting. I also could have given my opinion more about my vision of the project, I have been very compliant with the vision of the clients, while a critical attitude could have resulted in new ideas. For the next time I want to take into account that, just like asking questions, I should not be shy about giving my opinion about a project.

Applied techniques

In this five-week project I had to apply techniques from the six previous courses from the minor. This project is called the master's thesis because you demonstrate that you master the material from these six subjects. My expectation was that it would never be possible to apply all the techniques learned in a project. During the project it turned out that this would happen automatic and that I was able to apply most of the techniques.

Web Apps From Scratch

From the course Web Apps From Scratch (WAFS) I took the knowledge of client side rendering. To avoid reloading a page, multiple pages had to live on a page like we did with WAFS. Creating node elements and appending text nodes into them is a technique that I have used extensively in the application. I have also needed to remove elements using .remove().

After WAFS I didn't expect to start using client side rendering again, because it feels unnatural to me and I prefer to work on the server. In the situation for the Meesterproef project, client side rendering came in handy again and I have come to understand that this can be useful in certain situations.

Despite the fact that I didn't like the way of client side rendering, I started to apply it anyway. Now I am grateful for the knowledge that I gained during WAFS and now could easily apply. It also made me realize that no matter how useless a technique sometimes seems, it can always have a purpose.

CSS To The Rescue

As mentioned above, I experimented a lot with new techniques during the Meesterproef, during the CSS To The Rescue course i've learned that experimenting can be useful. During this course I experimented a lot with CSS techniques to learn to master them. I also used the tactics from that profession a lot during theMeesterproef. In addition, it was easier for me to write CSS, especially dealing with cascading and CSS-selectors. Previously I worked a lot with classes and id's, I avoided this as much as possible to keep an overview for myself and my team members.

Besides experimenting, I have often been able to apply my knowledge about SVGs and SVG filters, D3 renders a graph in an SVG element. Because I had already worked with this during CSS To The Rescue, I had a head start on this. I learned the gooey effect from the third iteration at CSS To The Rescue and was able to apply it directly to the graph.

CSS To The Rescue has made me realize how good it can be to experiment, and how much is possible with CSS. A valuable profession that will be of great use to me in the future.

Progressive Web Apps

I have not applied many techniques from the Progressive Web Apps (PWA) course. This is because we could assume that our user uses the application from home and has a good internet connection.

What I did use from PWA is the refactoring of code. I've rewritten a lot of "spaghetti code" in modules during this project. Because of this I immediately experienced how important it is to work in modules, given the size of the project. The code became more maintainable and readable in this way.

In order to maintain a high performance D3 was used, this performance could have been higher by applying a service worker that would apply the "caching first" strategy of pre-rendering pages.

In retrospect I would have liked to look more at this technique because you can improve the performance of your application in a relatively simple way, despite that the performance is still high.

Browser Technologies

The techniques from Browser Technologies were not applicable in our case. We could assume that the application is used by experts who work on a desktop with a good internet connection and Javascript. In addition, our application would also not be able to work without JavaScript due to the use of the D3 library.

Human Centered Design

Because we could assume that our user is an expert who works from a desktop at home with a good internet connection, we were able to make a reasonable exclusive design. The user understands the matter in the application. I should have looked more at the accessibility within the application instead of adopting the attitude: "a blind person won't use data visualization anyway". I could have thought more about how the application could be more accessible to a wider audience. I did take a good look at our target group and focused the app on it, as learned at Human Centered Design.

Real Time Web

During the Master's thesis I worked with Websockets, what I found interesting was that I applied the socket connection in a different way than I had learned with Real Time Web. At Real Time Web I learned to set up a connection between the client and the Express Server and to send data between them. For this project, the socket connection was made between the client and an external server. As soon as a request was made to the REST API, information about the changes in the app was sent from the server to the client via the socket connection.

I could not have thought of using sockets in this way. By dealing with websockets in this way I got a better idea of ​​what you can do with the websockets instead of building chat applications. Despite the fact that the websockets are not in the final prototype, I was able to apply my knowledge about this and eventually learn more from it.

---

So as I said I look back on this project with great pride, Thanks to a pleasant cooperation, we have been able to achieve a lot. I experienced the leading role that I assumed to myself as pleasant because in this way I could maintain control and ensure that everyone could express their opinion. I also had the freedom to experiment and learn new techniques. Finally, I was able to apply a lot from the previous courses and learn even more about the subjects from those courses.

In the future I want to take into account that experimenting is good, but that you also have to remain concrete so that you do not get lost in experiments. It is also important to give your own opinion in a project and I should have given my opinion to the client more in this. The most valuable lesson for me was not to immediately take three steps, but to read documentation first and take small steps forward from there.

The final prototype works and meets the expectations of the clients, on the team canvas it was described that the main goal was to make the client happy, i'm glad to say that me and my team did make that happen!