Abdalrhman

This is the last devlog in Flavortown. What a journey!

I’ve been stuck on a bug in the navigation, trying to fix why the main function did not run when I went to another channel page. After a lot of trial and error, turns out I was listening to the wrong event. I fixed it by listening to yt-navigate-finish and calling the main function and resetting the state on this event, and now it works as expected.

With some final touches, building the .crx file and creating a release, I am finishing this project. I wanted to add more features because I really liked the idea but there is no time left. Maybe I will work on it after Flavortown ends.

Worked on improving the accessibility of the badge the extension creates. Did that by adding role of status to it, and adding aria labels for both the refresh button and the stats span, this helps screen readers deal with it better. Also made sure the colors have good contrast and the button has focus state indicators.

Added a refresh button to update the badge stats without reloading the page.

To understand why this is needed, I need to explain how the extension counts videos. It uses a MutationObserver combined with a short timer that waits until no new video cards have been added to the DOM for a second. This gets the best of both worlds, it doesn’t run too early on slow connections, and it doesn’t need to know upfront how many videos to expect (which varies by screen size and channel size).

The downside is that the count can be inconsistent, not all loaded videos are always counted. The refresh button fixes this by counting whatever is already in the DOM at that moment.

My first implementation just called main() on refresh, which was a huge mistake, it reruns the whole loading flow including the observer wait, which made no sense. So I extracted countVideos() as a separate function, used it in both main() and refresh(), So the refresh is instant and much more performant.

Rewrote the whole extension with focus on performance. After getting everything to work in the last devlog, I focused on improving the code and performance, splitting it into smaller simpler functions, and optimizing it. Making the project ready for the features I will be adding.

I hesitated on using Vite as a build tool for the extension, but decided not to. Since the code is small, I split it into two main files, one for the main code and one for the messages I show on the badge about the channel depending on the watched video percentage, then loaded the messages file before the main file so I can access it at runtime. This was more than enough for a project this size. Maybe in the future I will use it to split my code into modules and then build it into a single file.

This is my first extension that I have ever built. I took a look at the chrome extensions docs then got started. I wanted to build an extension for youtube but I did not want to rebuilt an extension that have been created a 1000 times. So I made Channel Debt, it shows how many videos you’re behind on for any YouTube channel.

It knows how many videos you did not watch by looping over all of the videos that have been loaded in the videos page then see which ones you have watched, because these videos usually have a progress bar in them. It is not the best way but it gets the job done. It also shows a small message under these stats, trying to be funny and stuff.

Since youtube is an SPA it has to rerun every time it navigates to another page, because this does not happen automatically, so I fixed this and now it works as expected.

It is my first extension and the idea is weird so it might have problems but I am still working on it.

I created three different PRs:

1. Fixing a very annoying bug that appear when the user switched to zod/mini that made a default schema invalid because it uses features that are available only in zod and not zod/mini, I fixed it by changing the default schema depending on whether the user is using zod or zod/mini.

2. Adding a feature that allows users to reset the app to the default data (default schema, default data, etc), because it was annoying to not be able to get a working schema after deleting it.

3. Using React Compiler. This took SO much time, I had to reimplement multiple times, because the setup changed after the new version of vite dropped (v6.0.0). The React docs setup instructions are still incorrect, I actually opened an issue about this in the react.dev repo that is still open: https://github.com/reactjs/react.dev/issues/8353

You can find details about these changes here:
https://github.com/marilari88/zod-playground/pulls/Abdalrhman-Almarakeby

Shipped other PRs related to accessibility, performance, and miscellaneous things.

Finally got this feature merged! You can try it at: https://zod-playground.vercel.app

Turns out that my first solution was overcomplicated and that there is a simpler solution, but it is trickier to implement and has many edge cases. Closed the first PR and opened another one with the new solution. Adding this feature required a lot of research and trying out different solutions, even though it is not shown in the amount of new code shipped. But it has been great getting feedback from the maintainers, who helped me and guided me along the way.

Pushed new commits to fix the issues I got from the project owner’s feedback.

After completing the feature, I opened a PR and received feedback, and I am currently working on fixing the issues.

Working on adding locales support to the app.