profile-picture

Current events

Things I've been doing since Oct. 2022, which was when I quit my latest job.

The main reason I decided to take a break from work altogether was ironically to get better at what I do, that is, web development. It's ironic in that even though I was working as a web developer at my last job, unfortunately I felt the time I spent at work was not necessarily effective at becoming a better web dev.

~

Learning algorithms and data structures for the first time

At first, I was very hesitant to learn algorithms and data structures the proper way as elaborated in Teach Yourself Computer Science, mainly because of the significant time commitment implied by the learning materials.

I don't really recall how I convinced myself to do it, but I eventually decided to bite the bullet and learn data structures and algorithms for the first time in my life—well after all, I was planning to do some LeetCode grinding as a part of job search preparation in the future, so why not learning the underlying concepts and ideas first along the way, I probably thought 🤔.

I first grabbed Skiena's book and the accompanying online lectures as my main learning resources, but I abandoned them right before the graph algorithms in favor of other materials I'd found that I liked more: Sedgewick's book and his coursera courses (part 1 and part 2).

The thing I like the most about Sedgewick's book and the courses was the fact that they provide concrete implementations (Java) of every algorithms that they discuss in the book and the lectures. I found it much more helpful to understand algorithms when learning the concepts and implementations together, side by side. I also liked the fact that they took time to explain Java fundamentals in the beginning of the book. It was immensely helpful for someone like me who's not very familiar with Java language to better understand the implementations (and be able to turn in their homework assignments 😂).

By far the most challenging aspect of learning algorithms was understanding the performance analyses, involving order of growth and mathematical proofs (and some graph and string related algorithms such as maxflow algorithm and MSD string sort 😭).

I cannot say that I understood everything covered in the book and the courses very well (in fact, far from it. It feels like I'm already forgetting half of what I learned), but at the end of the day, I'm glad that I took time to learn the subject at least this once.

Contributing to React Aria

I always appreciate a well-crafted UI component library because it's definitely not trivial to make one that handles a lot of browser inconsistencies, different inputs from various devices, and web accessibility. So I was instantly hooked when I found React Aria and wanted to learn how it works underneath, which led me to contribute a little to this amazing project.

Reading SICP for the first time

As a non CS major, I've always wondered what subjects CS students learn in college, and I've been looking up online a way to teach myself college-level computer scienece. Luckily, there's this wonderful website called Teach Yourself Computer Science where the authors have put together a well-curated list of subjects and recommended study materials for computer science. I've visited this website so many times, promising to myself that one day i'd start working on the subjects in the list—the promise that had never been realized.

I finally decided to take the first step by working through the book called, Structure and Interpretation of Computer Programs (SICP). It was a very hard book to read—I actually only read up to 4.4.3 since CS 61A (the video lectures I was watching as a complementary material) didn't cover beyond that, and I lost all the motivation to finish the book to the end when CS 61A ended 😂. Well actually, the general/important ideas presented in each chapter of the book wasn't too hard to understand per se, but the examples and exercises were—mostly because they expect you to have some math and electrical engineering knowledge as a background. And most of these exercises—on top of needing to know some math context to solve them—weren't something that you could solve right away in a few minutes after reading the chapter above. They were rather something that required you to sit down and think hard for hours or even days to solve them—I decided not to invest a lot of time on these exercises but rather look up other people's solutions most of the time; such as sicp-solutions and SICP Solutions. While I'm not proud of not working through most of the exercises myself, truth be told, I wasn't particularly motivated to put a lot of efforts on them since I wanted to spend those extra hours on learning web development instead.

Despite the frustrating experience with the exercises, I've found surprising amount of ideas and concepts in the book are very relevant to JavaScript and React.js—things like the simplicity of functional programming (as in given the same input, a function produces the same output everytime), the challenges introduced by assignment and mutation especially in concurrent execution, and ideas like delayed evaluation, memoization, thunks, etc.

At some point in the future when I'm a little wiser (hopefully), I should give this book another try, and that time I'll do the exercises for real, maybe?

Contributing to Storybook

In the beginning of May. 2023, I finally decided to take a look at Storybook. I'd seen it being mentioned by many web devs on the internet quite frequently (mostly positive), and some even argued Storybook was an indispensable tool when it comes to UI component development.

Well, they were certainly not wrong.

I still remember how mind-blown I was, when I first grasped the concept of Storybook—in a nutshell, it provides you an isolated environment to develop a single UI component at a time without affecting other parts of UI or logics in your website. It felt like I found the final missing piece in my web development process when I discovered Storybook. In fact, it felt like Storybook was the most important piece of all because it is where all the UI components are going to be created, assembled/incorporated into bigger components, and tested thoroughly.

What's nice about developing a UI component in isolation is that you only need to worry about UI logics (as in how the component will behave) at the moment without having to think about stuff that needs to be handled by a framework or how to process data for this UI component, right away—you can think about them later when you finish developing the component. This sort of separation of concerns, I believe, encourages your codebase to have a better structure—I find it almost always much harder to read the body of a React component in which all sorts of logics are intermingled together.

Anyways, the discovery of Storybook was so sensational to me that I felt a strong desire to contribute to this open source project. So I did just that for a while.

Teamfight Tactics stats website

https://tft-top4-insights.vercel.app/

There was an online game that I used to enjoy playing—Teamfight Tactics (TFT). So naturally I had been checking out Riot's APIs to see if I could create something fun or useful with them.

The thing about this particular game is that every now and then (roughly a few months), there's a new "set", and when the new set comes around, the winning strategies you used for the last set wouldn't work on the new set. So you have to sort of learn new strategies for the new set all over again everytime there's a new set. And I wanted to shorten that learning process by analyzing winners' strategies (there are 4 "winners" out of 8 in every TFT game)—this website was an attempt at that.

https://react-image-gallery-sook.vercel.app/

I had fun making the image viewer component in https://image-experiment.vercel.app/ below, so I decided to create a fancier version of it, including skeleton loading animation, transition animations on navigation, swipe gesture support on touch screen, keyboard navigation, infinite scrolling, etc.

I think smooth and well-behaving animations are great to have on any website—but they are tricky to get right. The animations in this project are mostly taken care of by Framer Motion, which is a great animation library, though I had struggled quite a bit trying to orchestrate different animations to work together and ensuring there was no significant performance issue (jankiness / stuttering) on mobile device.

Web animation is a subject that I want to dive deeper and really grasp the fundamentals firmly in the future, so I could rely less on higher level libraries.

Content management system for my cousin's website

I wanted to integrate CMS to my cousin's new website so that he could edit and manage his contents intuitively. I did some research and Sanity looked like a great fit here so I created a tailored Sanity Studio with live editing and preview features for my cousin's website.

(Despite the effort, my cousin doesn't seem to be using the new website and the editor at the moment, whereas it seems he continues to update and maintain his old wix-made website. I guess I lost to wix.com as a website service provider 😭)

My (now old) personal website

https://website-old-sook.vercel.app/

Well, the original plan was to maintain the website with discipline by writing about things related to web development and software engineering on a weekly basis, but it quickly turned out to be a lot more challenging than I'd originally thought, so I abandoned the idea (and the website) and moved on to other stuff shortly after.