Ostendo
// React, Typescript, & TailwindCSS
Obstacles
Smooth, complex transforms
To fluidly animate between different tile states, I had to use many absolutely positioned elements, guiding skeleton objects, and quite a bit of math.
Skeletons were used to figure out the start and end positions of each element in the Tile, they would be stored as refs and passed up to the main Tile component. The main challenge was avoiding the use of width/height and only using the transform property.
There were 3 skeletons per Tile. A conforming skeleton (matching the bounds of the thumbnail on the page), a full skeleton (the full sized final tile), and a slim skeleton (the slim version of the final tile)
React devtools for extensions
Devtools uses the window object to attach global flags, since extensions don't have access to the same window object as the page (and YouTube isn't built with React), devtools wouldn't work. Then I discovered React's standalone devtools app. By injecting a script generated by the app into the page alongside my extension, the standalone app was able to hook into the render events of my extension and provide usable profiling!
Having a non-zero user base
Creating something for yourself is very different than creating something to be used by others. I'm continually listening to feedback from users, whether that be things that need tweaking or new features people suggest to me, and I love it! Every message I get helps make Ostendo even better and I'm excited to keep up developement. I plan to continue adding features to Ostendo's usage on YouTube, and eventually support other sites like Twitter!