Painful Insights from a more than a month-long journey

Hi there 👋,
I'm Israel Rotimi and I'm a JavaScript developer, I specialize in all things JavaScript from frontend to backend, feel free to reach out to me.

So, I was building a website for myself. It's a portfolio website that incorporates animations into the design. So I was actually following a tutorial on youtube on the same project, then I ran into an error I couldn't seem to solve when I added a 3d object to the scene.

The object was rendered using three.js and the stack was Next.js.
Everything worked fine until I added the object.
It would compile successfully in the terminal and will start rendering in the browser, then all of a sudden throw this screen.

My heart stopped💔. I thought does my computer not support webgl!
I can't afford another right now, then I thought webgl was said to be supported a variety of systems why shouldn't mine support it. I was using chrome updated to the latest version, so I tried to see if there was anything in the code I could do to solve it.
I then searched through all the settings looking for webgl, all I saw was this setting: "Use graphics acceleration where possible" and it was turned on. So I abandoned the project for the next few weeks.

After being motivated again, I decided to take a look at the project. I asked claude ai for help and it suggested isolating the suspected cause. I did that and same error then I used firefox dev instead of chrome and it worked without the error. I later tried it on edge but it gave the same error as in chrome.

I continued development with firefox dev but was worried my project couldn't run on other browsers. I searched through the settings on edge and found the same setting I saw on chrome: "Use graphics acceleration where possible" and it was enabled. I disabled the setting to see what would happen.

To my greatest surprise, the app ran without the error. I did the same on chrome and same result.

Here's what I learned from this journey

• Be systematic in your debugging approach: Isolate the problem, test different browsers (where that applies), test across multiple use cases

• Don't just give up too easily; It's not the end of the world

• When you feel stuck, take a break, then come back refreshed

• Lastly, be curious, experiment. I wouldn't have known why my app wasn't working if I didn't change the setting

BTW, I'm still working on that project but you can check it out here: https://github.com/israelrotimi/my-3d-nextjs-portfolio If you do please leave a ⭐ and leave your thought's about that in this thread as well. Thanks

Please share your thoughts and takeaways. I'd like to know if anyone has been in a similar situation. Kindly share