Now that I'm finished with Material-UI, I'm then taking a look at my personal website. Oh boy… There are a whole lot to improve. Prior to this point, I'd approach every project with a mindset of creating the "perfect" product right out of the bat. And then I'd feel somewhat guilty if I didn't manage to polish a few nook and crannies in it. Haha, I've learned well enough that chasing for perfection never do me a favor other than my desire to pull my hair out of frustration. I'd love for my hair to stay where it is for a little while longer, thank you.

With that in mind, I've come to acceptance that there is no such thing as "the perfect product" right off the first batch. But rather every product should grow and evolve over time. A web application is exactly like this. I released my personal website when most of the necessary parts were already in line, namely project list and contact form. I added a few new features yesterday such as navigation bar and page scroll interactions. And yes, I started my website's design to not include a navbar. Even though I call it a navbar, there is still no navigation functionality in it. I just feel like the top section of my website to be too empty after my decision to ditch the navbar when I developed the first release. I changed my mind and thought of adding a simple one with my name and a few social media links in it. It turns out fine, to my surprise.

The other functionality that I wanted to add was page scroll interactions, they are navigation bar to hide when user scrolls down, and to add a button to scroll back up. I've always liked these two features. To make it work, I need to monitor the direction of page scroll. I created a context object for this to solely monitor many scrolling event of the app. But as always, it was not a smooth sail for me. It's a bit weird because I have a feeling that I have created the same functionality in one of my previous app and I think I had a smooth sail on that one.

I have a problem with updating one of the value, the last scroll position. I use this value as a comparison for current scroll position to determine scroll's direction. Simple right? Well, it is until I realize that my event handler does not get the latest "last scroll position". I store all my context values in each respective states. I assign the last scroll position to be the current one at the end of every scroll cycle. Somehow… The latest last scroll state value does not get into the event handler. At first I thought that was cause by the behavior of function closures for it to only read the last scroll position stored inside its closure when the function first declared. The solution for this is to add last scroll state value into my "useEffect" hook which I use to assign scroll listener to window object. In the end, I never spend enough time to ascertain my hypothesis and chose to use someone else's scroll context instead.

End of story, I've successfully added new features to my personal website. The header is much merrier with a new navbar, and there is also a button to scroll back to the top if the user gets too far down the abyss of my website. Visit it (here) to check it out yourself. The next in my plan is to create an ecommerce playground app. I will use this app to, well, play around with many payment system and see how it integrates with a React application. Thank you for reading my post and have a nice day.

 This free site is ad-supported. Learn more
​