Friday review Week 40

Friday review Week 40

From today I am adding a new feature to my blog. It’s a weekly review of my coding and a paper trail of my learning achievements. As I am aiming to become a full fledged web developer there are many technologies and development processes I need to learn. If you are new around here, here’s a quick recap of what I am about:

  • Background as a Political Science graduate
  • Currently a desk officer in governmental employ
  • Based in Stockholm, Sweden
  • Part-time studying Computer Science at Mid-Sweden University, currently a course in Java
  • Doing a civics web project called Hum - “policies made easy”
  • Enthusiastic runner and gamer hobbyist
  • Dad of 3

This week of coding has seen me touch on three areas: blog, Hum project, and Java fundamentals.

I discovered a significant bug on my blog. The bug was introduced when I refactored the new post and editing methods. I discovered the bug when I went and checked on my latest blog post where I had some links that were wrong. So I went to edit the post and this led to it removing the images. When I reentered the images something was not right: going to view the blog post threw a 500 return code. Obviously something was wrong. I entered an issue to the GitHub repository and dealt with it!
blog_bug.png 74.91 KB

So what was the solution? A simple reference was wrong!
blog_bug_resolved.png 20.19 KB

When I updated how editing was done I had refactored the FormType as well. I introduced a new one that was tweaked a bit different from the type that was used when creating a new post. The new type was named BlogUpdateType where the old was named BlogPostType. Luckily I remembered that this was what I had done, so I quickly found the problem and could resolve it.

The Hum project
Considerable amount of this week’s coding time has been spent on getting this project to the next level. I had a few tasks that I saw as some major challenges and would probably require a lot of attention to get anywhere, mostly because some of the things I had hardly done before.
First was how to set up an API that I could use. Using API Platform made a lot of this really easy. Using simple annotations to mark an entity as an API resource would mean that it would be accessible through all the CRUD operations. But trying to get the major entity which I call Hum would lead the API to run in circles and throw a circular reference error. The issue was that Hum would reference a collection of another entity, and this entity in return would reference the Hum entity. That was when I learned about the annotations normalizationContext and Groups. This allowed me to only include the fields that I thought were pertinent to the project. I omitted the references back to the Hum entity and this resolved any circular references.

Having an API to work with, I now built up the front facing side of the project as a different GitHub repository. This one is built with React Redux and uses Axios to fetch the data. Having a total insight in how the API works made it easy to work with the data that I was getting. The next challenge was posting data. All visitors are free to answer some questions about a subject and these answers are sent back to the API. This led me to learn about the axios.all() method. I bundled each answer in an axios-call, then sent this bundle to the all()-method.
Having some asynchronous calls meant that I also wanted to show to the visitors that something was loading. So I added a loading indicator done with CSS.
hum-prog-05.gif 1.34 MB

But the most challenging task I had this week was resolving how the header would minimize on scroll. Currently the header takes up a lot of vertical space, displaying a forest, a stream and the parliamentary building. On scroll this is to disappear and only the links and logo are to be displayed. Using React I had it update a component’s CSS class when scrolling below a certain point, and removing this class when scrolling back above it. The CSS class dictates the height to be smaller and allows for a transition to it, and reverts back to the original height when the class is removed. An issue occurs however when the scroll position is just about the trigger position. As the header changes, the scroll position changes as well, which can trigger a loop where the header constantly is changing. My solution was to have the trigger position to add the CSS class to be lower down the page than where the trigger position to remove it is. So here is the result:

hum-prog-06.gif 3.65 MB

Java fundamentals
In my Java studies I have this week published a post about events in Swing and also wrote about inheritance and interfaces to be published later. It’s been some refreshers as well as a deeper understanding of how to leverage inheritance to control for access to fields. I’m looking forward to getting further with Java to start building some interesting projects.
This has been all for this week. See you around on Wednesday for more Java, and have a nice weekend.