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.
CSS Grid opens a plethora of new possibilities for designing layouts. We can finally let go of the 12-columns layout since our new tools made it easier to manipulate our grid system. However, I still believe that 12-columns layout is still going to be a thing at least until the adoption of CSS Grid becomes more common. A wider adoption of CSS Grid means more sites with unique layouts and that means more source materials for designers to take inspiration from.
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:
CSS Grid is awesome and that is because it is a new tool that makes working with layouts much easier. This post is not going to be about how to work with CSS Grid; I think there are plenty of posts and resources out there. This is going to be a documentation of my creative process of coming up with unconventional layouts since CSS Grid gives me the freedom to do so. It could perhaps peak your interest in exploring CSS Grid.
I recently gave a talk titled Breaking Down SVG Animations at a local meet-up in Singapore called Talk.CSS. It is not so much about SVG and it is more about how to approach complex animations for the web as a beginner. In this talk, I refer to complex animation as animating cartoons or characters; anything other than your standard UI animation. For example, how do you animate a sheep eating grass? These things require quite a bit of imagination:
You can always watch my talk on YouTube and look at the slides here but for the ones who prefer reading instead of watching, here’s a write-up! Read More
I gave my first talk on November 2015 at CSSConf Asia in Singapore. And then a few documented and undocumented ones at small meetups and at work. And then another one at Rakuten Tech Conference in Tokyo a few months ago in October.
I didn’t actually plan on giving talks until my peers and mentors (and mom) started pushing me to give talks. So, I woke up one day and I decide to submit a talk proposal just so that I could get them off my back. But now I’m glad that they are persistent in their pestering since speaking skills is something that everyone should learn and acquire.
However, not everyone is comfortable with it and they always have the same concerns and the same excuses: that they don’t know enough, that they have stage frights or that speaking should only be done by the ‘pros’ (whatever that means). I am going to address some of these common concerns and as someone who is still new to the art of speaking, I had some of these concerns as well; you couldn’t have anyone better to address it for you. 😉 Read More
I went to the CSSConf.asia in Singapore recently and enjoyed lots of interesting talks. Out of all interesting talks that are given out that day, the information that stands out the most to me was about writing maintainable CSS and creating improving the performance of the UI. Read More
This is long overdue! I created this last month before I started working and I love the result. I saw this accordion originally at Ch3mical.com, a portfolio by Paul Kelley. He had achieve this effect using images and jQuery. I decided to replicate the effect using pure CSS and font icons. Read More
Starting 4th February, I will be working as a front-end engineer at Viki, an awesome company based in Singapore. It is a video streaming website with a crowdsource subtitling functionality. It makes the viewing of K-drama and J-drama even more awesome for all of you rabid fan girls (and boys). Read More