Reflections on Completing the IT Ironman Challenge
Today is the final day of the Ironman challenge. I feel like my conclusion wasn’t wrapped up very well, and many parts weren’t thoroughly covered due to time constraints.
Publishing articles for 30 consecutive days is certainly no easy feat. It taught me that if I ever take on a similar challenge in the future, I must prepare well in advance so that when unexpected situations arise, I won’t have to scramble to patch together an ending.
At the same time, the topic I chose this time was WebGL and 3D graphics—areas I had never touched before. I initially thought that 10 days of learning would be enough to grasp the fundamentals. In reality, understanding how to write and apply WebGL shaders, using Three.js APIs effectively, and so on, all require a solid foundation in computer graphics theory to truly master the frameworks.
Ten days of learning turned out to be far from enough. Just getting the hang of writing GSGL took considerable time, not to mention applying it to practical computations. Even though frameworks handle the low-level operations for us, you still need a deeper understanding of what’s happening under the hood if you want to achieve more advanced or flexible results.
As for A-Frame, I’ll find time to gradually fill in the gaps later (if time permits, QQ). Looking ahead, I hope to continue down this 3D path to bring richer visual experiences to frontend development.
This definitely requires dedicated practice and accumulation over time, and it is far more challenging than traditional frontend development. Still, over these 30 days, I truly learned a tremendous amount of things I previously knew nothing about. Shaders, which once intimidated me, are now something I can read and write; I have a foundational understanding of Three.js APIs; and I also explored the progress of WebVR and got to know the A-Frame framework.
These 30 days can easily be called the most fulfilling month of the year (laughs). I know there are still many gaps in this series, but I hope readers can take away some useful knowledge from it!
Postscript
I received an Honorable Mention. I guess you could call this my recap for 2016! There were so many things I hadn’t properly documented.
When I first saw the registration announcement, I actually hesitated for quite a while. As you can imagine in the frontend community, tons of people were going to write about react and redux that year. In that case, why not take the leap into WebGL—something I had wanted to try for a long time but never got around to?
I’ve always been fascinated by interactive visuals, but for an engineer, handling animations and similar logic can be tedious and frustrating. Even though the things I learned this month are worlds apart from everyday web development—and rarely applicable in day-to-day work (who has time to worry about visual effects when deadlines are already so tight?)—isn’t broadening one’s horizons by learning these things a great reward in itself?
More and more companies are expecting frontend developers to handle data visualization. Once considered boring and tedious, it is now gaining serious traction in the era of big data. This direction demands proficiency in Canvas and WebGL. While plenty of modern frameworks abstract away the lower-level APIs, as frontend developers, we still need a foundational grasp of what lies beneath. Otherwise, the law of leaky abstractions will catch up with you eventually.
Related Posts
- Recreating My Room with Three.js Using React Three Fiber, I brought my real room into the browser—turning physical objects into an interactive table of contents, and using spatial memory to tell the story of my life and work over the past few years.
- Things to Keep in Mind When Using Images in Frontend Development Expanding on Jake Archibald's article, this post organizes how modern responsive images should be written: why width/height are still necessary, when to use CSS aspect-ratio, how to choose between AVIF and WebP, and using picture/source/srcset for art direction on mobile devices.
- CSS field-sizing — Auto-resize Form Elements with a Single Line of CSS Previously, auto-resizing a textarea required listening to scrollHeight in JavaScript. With CSS field-sizing: content, a single line replaces it all, supporting textarea, input, and select. This article covers the pain points of older approaches and how to use field-sizing.
- Make Your Link Underlines Look Better: text-underline-offset By default, underlines sit very close to the text. Some designers dislike this look, and personally, I don't think it looks great either.