The Art of Solving Problems with CSS

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?
Read More

Fixing cropped subtitle on HTML5 Video for Chromecast Receiver on Overscan Mode

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:

Read More