Year End Review

I recently wrapped up my annual Year End Review. With 8,000 lines of code, 7,000 words, and 50+ hand written components, it’s a very large side project which I re-invent each year. It has always been a challenge in design, creativity and articulation. This year, in line with my goal of becoming a JavaScript developer, I decided to put a much heavier emphasis on the technical challenge than I have previously.

For example, every page loads text from JSON files, making a cleaner separation between code and content. And rather than manually repeating HTML elements, I programmatically construct the relevant page sections.

Nearly every page includes interactive features and mini games. Several connect to a Firebase database, reading and writing values.


Things I Learned

  • Deploying to Firebase Hosting is easy. So is connecting to their NoSQL database.
  • Deploying to AWS is sometimes… challenging for beginners. I was unable to justify tackling its complexity for this project when I knew of friendlier options.
  • Version control is useful for organization and archiving, even with a single developer. It enforces good discipline and made it easy to work on multiple machines.
  • I really don’t know React yet. I made the site work, but I have a long way to go before fully grasping ES6, and good, modern object oriented JavaScript practices.
  • Playback of CSS animations is still not well optimized. Infinite animation loops will burn your CPU to the ground.
  • High fidelity design is hard when you’re utilizing modern features and supporting a wide range of mobile, desktop, and high DPI devices + browsers. The work is not hard but it is tedious. My propriety was developing for Chrome on desktop at medium DPI while being mindful of the need to accommodate everything else. That worked pretty well, except for when it didn’t.



PurposeThis is a personal tool for accountability, gratitude, and growth
Cool Features
  • Firebase Hosting and realtime NoSQL database
  • Hand drawn vectors and CSS animation on every page
  • Code organized (mostly) in accordance with the 7-1 pattern
  • Victory.js chart library

What I learned

Languages, Tools & FrameworksReact.js, ES6, firebase
ImpactThe review is sent out to friends and family. Thanks to the dynamic elements, for the first time, they're able to interact with it and contribute to the content.

Add a Comment

Your email address will not be published. Required fields are marked *