A Distraction From Work

Not always functional programming

ChromeBee is a fun little chrome extension that me and my buddy Majed made for some stress relief from spending hours on reading documentation and research. The flower emits pollen which the bee follows and collects. Click Around!

The bare bones

It is created in JavaScript following OOP architecture with the P5 Library using pure DOM Manipulation.

Always some sort of problems

Some technical challenges that I faced at the time:

• The P5 canvas essentially acts as an overlay atop the current DOM. When this page underwent server-side rendering (SSR), the pre-rendering process couldn't identify the DOM. To fix this, I had to dynamically import Chromebee on Next.js so that it gets rendered after the page has loaded.
• Because the pollen instances was following an OOP (Object-Oriented Programming) structure, each instance created on hover lost its reference once it was produced on the DOM. To address this, I used the Bind function to dynamically manipulate the nodes especially the expiration function in which was responsible for deleting the nodes when they reach the bottom of the canvas, ensuring a proper cleanup of the DOM.

I have ported the extension on to this page redone using react. At this moment in time, the P5 library has some compatability issues with the current verions of Next.js so I had to roll back to Next v14.0.4.