At work, I have been working on making our UI components more reusable. Well, nothing new there since I have spoken and written about making CSS more reusable in the past. But as Viki grows, so does its services. Making UI components reusable across a single app is no longer a challenge. Instead, we need to focus on making our components shareable across multiple apps.
I want to share my thought processes and experience in turning our existing React components on Viki and Soompi into an NPM package. This is more of a guide rather than a tutorial since tools and its behaviours change really fast in our industry. I will be focusing on React components here but this experience can be applied to any UI building libraries out there.
At my workplace, sometimes I’m tasked with creating impractical UIs such as this ribbon shown in the screenshot below. I see them as impractical since it is not your average card UIs or navigation bars that are easy to create. These types of problem requires a bit of thinking but with a systematic approach, you can get a glimpse of a possible solution easily.
When I received the mockup from my designers, I have 2 choices: use the ribbon as image (the easy way) or use CSS (the hard way). I love a good challenge and so I chose CSS and I will take a clever solution with CSS any day provided that it gives you a clean solution with good browser support. So how did I approach this problem? What’s the trick to solving problems with CSS?
I am currently working on developing and maintaining the Chromecast Receiver app at Viki. For those of you who are not familiar with Chromecast, a Chromecast Receiver is a front-end app that runs on the Chromecast device making it possible for our users to display our content on their TV either through the mobile app or our site itself.
Recently, I had to fix a bug where our subtitle is cropped on the left and right side. This does not happen on all TV though, only the ones with Overscan mode on: