Code Reviews - joeriBouwman25/bubble-machine Wiki

🧬 Code Reviews

Week 2


In the first code review there wasn't that much code to look at, Joost give me the following feedback:

You make good use of modules and don't repeat yourself. Make agreements with your teammates on how to write code to maintain consistency.

Make a GitHub Project board using the MoSCoW method. It will help you to oversee the tasks that are most important to do.

Remco and Nora

The first code review we had was together with Robert. During the review, he gave the following feedback. Because we are a team consisting of 4 people, it is necessary to come up with a clear view of who is going to do what, what are each one's responsibilities. We already discussed some of it last week, however because we were still early in the experimentation phase it wasn't clear who was doing what. After that we looked at some of my written code, Robert didn't have much to say about that.


This week I got feedback from Justus about my code. I told him that I was working with D3 and showed the graph I had made. He gave me a short presentation on how D3 works and this helped me more to understand the code. The graph I showed whas buggy and he told me that I had to fix that and make the lines more understandable in what they mean.

Week 3


In the second round, I had a code review with Justus:

  • Try to import blocks of CSS instead of one big file.
  • Work with classes to avoid cascading conflicts.
  • Take a look at Parcels or PostCSS

To optimize clarity, make an SVG path instead of circles for persons in the prototype. You can make the SVG images in Adobe Illustrator. When you've made the SVG images, you can use SVG OMG to compress the file and implement it in your D3 graph.

Take a look at Gooey Bubble effects for your data visualization


The second code review was with Robert. As a group we talked about the tech stack and why you would choose certain things. I showed the prototype we were working on, which did not work in my branch at that point. I also wanted some feedback on the heat map graph and how I can make it look more like a real heat map. The feedback was to try SVG filters.


I missed this week's design review because I wasn't feeling too well. I asked my teammates about the feedback they received.


This week I had a design review with Koop. I was a little bit late because my train got delayed. The feedback I got was the graph is not self explaining and you don't know what the items are.

Week 4


In the last round of the code reviews, I had again a review with Joost:

“Build first, optimize later”

  • Don't repeat yourself
  • Use Modules for a clean project
  • Use Issues for refactoring

Joost showed us a new feature in CSS called Scroll Snap, maybe this will come in handy later.

Make sure to refer to labels connected to issues in your design rational. Write meaningful labels in your issues, so you can filter it out later.

You can add a folder UI for all the UI related script files to order your modules even further.

Write issues for higlight.js:

  • The use of var instead of const/let
  • Don't use inline styling
  • Naming conventions in the entire file
  • cache URL in a variable
  • Write functions at the bottom of the file for better consistency. (hoisting will lift them up)

Tim did write the file, so I let him fix the issues.


The last code review was with Justus. I was working on changing the onboarding to fit the design the UX students provided so I did not have any questions regarding the code. We talked about d3 and the kind of experiments I did. He was that we chose touse the network graph instead of a heatmap we were planning on making as well. I explained that I had tried to create a color overlay effect with SVG filters and that I could not get it to look how I wanted. He told me making different colors for all densities in the areas is pretty hard and I might try to do it using opacity of the SVG elements.


During the review with Joost, we looked at other people's code and the importance of having clear, documented code agreements. So when we had a look at my code there were some performance issues because out of simplicity I wrote some elaborate code which I could've written way easier, so I had to fix that. He liked that we were working with modules. Later on that day, Joeri also had a code review with Joost where he looked more closely at our code.


This week I had a design review with Robert. The feedback that I have gotten is that I still do not understand what the project is so I have to fix that. I asked about the SVG not working offline and he gave me the advice to add css inline when downloading.