client-work (14) codrops (13) computing (1) css (56) design (35) devlife (17) devtools (2) drupal7 (28) drupal8 (7) emoji (1) frameworks (3) git (1) github-pages (5) gitlab-pages (1) gulp (5) hardware (2) html (10) i18n (4) javascript (13) jekyll (6) kohana (3) nexmo (6) nodejs (7) opinion (33) performance (4) podcasts (3) retrotech (4) rtc (1) servers (2) side-project (4) site-building (12) specifications (1) theming (4) translated (5) typography (15) workflow (8)
2019

Where did CSS named colours come from?

Talk.CSS, which is Singapore’s monthly CSS meetup, has a segment called CSS colour of the month, where we mention 1...

Sub-pixel rendering and borders

I was incredibly chuffed to have been able to speak at the inaugural Talk.CSS in Melbourne recently, and after the...

Learning CSS by reading specs

Recently I got the chance to do an interview with Vitaly Friedman as part of the run-up to View Source...

Flexbox and padding

I just saw that my previous article on magical kittencorns and CSS animations worked out to an 18 minute read....

Figuring out CSS animation properties with a magic kittencorn

A little known fact about SingaporeCSS is that we actually have an unofficial mascot. I haven’t named it yet, because...

Recreating the Fool's Mate chess move with CSS Grid

When Firefox 66 was released, one of the features that got myself and a couple other layout enthusiasts really excited...

Internet Explorer 3, an adventure in cross-browser compatibility

Some of you might know that I run the CSS meetup, Talk.CSS in Singapore together with my best mate, Wei....

Talking about talking CSS 2019 edition

November 24, 2016. The day I gave my first conference talk at CSSConf.Asia. June 3, 2017. The day I spoke...

A thank you and love letter to CSSConf EU

One year ago, I got the opportunity to speak at CSSConf EU 2018. I had just started out speaking at...

Friends don't let friends implement dark mode alone

So I have this friend, Wei, who’s basically an expert with CSS blend modes, right? And she came up with...

Animating grid rows and columns

One of the biggest things in version 66 of Firefox was the ability to animate grid rows and columns when...

Understanding grid placement through building a HTML periodical table

I’ve been using CSS grid to build layouts for quite a while now, and all my designs to date involved...

Using CSS to make a print banner

I talk about the web. I talk about the web a lot. But sometimes, we need stuff made in the...

CSS variables for fun and no profit

I run a little monthly CSS meet-up called Talk.CSS, and the man who founded this endeavour with me one fine...

The anatomy of a pure CSS heart

I’ve been helping to mentor a Coding Girls initiative called 30 days of CSS and one of the first projects...

HTML slides without frameworks, just CSS

I am a huge fan of reveal.js and have used it for almost every talk I’ve ever given. It is...

Customising Reveal.js beyond creating a personalised theme

As I start preparing for a couple talks I will be giving for 2019, I realised that my first talk...

Table design patterns on the web

Tables are a design pattern for displaying large amounts of data in rows and columns, making them efficient for doing...

Examining ‘squishiness’ in Intrinsic Web Design

One of the highlights in the world of web design for 2018 was when Jen Simmons came up with the...

2018

Using DevTools to understand modern layout techniques

I recently got the opportunity to visit the Mozilla Community Space in Jakarta and speak at MozKopdar JKT with Alex...

Does your interviewee understand CSS layouts?

Recently, I was asked to review/rework a front-end coding test for potential hires. A colleague of mine suggested using HackerRank,...

Customise radio buttons without compromising accessibility

We can do quite a lot with CSS to create fancy radio buttons (or checkboxes, for that matter), and that’s...

Refactoring an inherited codebase

So for 2018, I got myself some gainful employment doing full-time frontend development work. You know, the kind where you...

CSS exclusions with Queen Bey

I recently came across a post by Ben Frain expressing his frustrations about CSS shapes and exclusions. And although I...

Talking about talking CSS 2018 edition

Last year was the first time I spoke at any event outside of Singapore, and it was quite a whirlwind...

Math and front-end

If you were one of those kids that wondered why you had to attend all those math classes and learn...

Learning Cordova while rewriting an app

This is a “refactoring legacy code” post, and I suspect you’ll see more of these in the months to come...

How I design with CSS grid

After a couple of rounds of introducing CSS grid to people who haven’t tried it before, I found it wasn’t...

Teaching CSS grid to newcomers

I’ve had quite a start to 2018, largely due to my tendency to “say yes, worry later”, which has both...

2017

Building a webic community

So this month, I met a lot of awesome people while attending my very first Mozilla All-Hands, among whom were...

Notes on vertical writing and CSS grid

When I was working out the kinks in my year-old vertical typesetting demo, I attempted to use CSS grid as...

Vertical typesetting with writing-mode revisited

About year ago, I wrote about the findings from an exercise in attempting to typeset Chinese vertically on the web....

Debugging CSS Grid Layouts With Firefox Grid Inspector

You may have heard quite a bit of talk about a CSS feature called Grid this year. If you are...

Using feature queries for cascading web design

Feature queries, AKA the @supports rule, were introduced as an extension to the CSS2 as part of the CSS Conditional...

Practical uses for the aspect-ratio media query

Back in 2016, during my first ever conference talk (albeit a sort of lightning talk) at CSSConf.Asia 2016, I said...

Building a CSS-only image gallery (with fallbacks)

This article has been translated to Japanese on SeleQt. Sometimes, we get handed a project in which we have almost...

Talking about talking CSS

This is almost a live recap of my tour of South-east Asia (and Hong Kong) this month (September 2017) and...

Basic grid layout with fallbacks using feature queries

This article has been translated to Japanese on SeleQt. I’ve been using CSS grid (which henceforth will be referred to...

Rethinking web design

I’ve been thinking a lot about web design lately. Actually I’ve been thinking about web design ever since I started...

Over-engineering Sass maps

I finally put together a landing page for the little random demos I build from time to time because, you...

We need to talk about Opera Mini

Earlier this year, Jen Simmons asked the following question: From your memory, which browser has now twice the user base...

Grid + Flexbox: the best 1-2 punch in web layout

This article has been translated to French by Pierre Choffé on La Cascade. We’re 5 days away from the stable...

The one about home

At the end of 2016, I published a website called Penang Hokkien 槟城福建话. Just a few months prior, I had...

2016

Images, the web's nutrition problem

Okay, that wasn’t my best headline, writing is hard 🤷. But let’s face it, the web has an obesity problem....

Chinese language on the web

If you hadn’t realised by now, I am Chinese. I was born in Malaysia, then studied and now work in...

Fun with CSS: NBA edition

This is my second “Fun with CSS” post, maybe this should become a series. But anyway, I had watched the...

Fun with CSS: TechLadies edition

So there’s this thing going on known as the TechLadies Bootcamp. TechLadies is a community-led initiative for women in Asia...

How well do you know CSS display?

This article has been translated to Japanese by Kana Takahashi on POSTD. The display property is one of the most...

Tim Brown on Shoptalk Ep. 218

Episode 218 of Shoptalk featured an audio clip by one of my favourite designers, Tim Brown. It’s a short clip,...

The one on the cutting edge

If you’ve been following along my latest exploits (though I doubt anyone is), you may know that I’m the co-organiser...

Understanding the box model by building a navigation bar

Working in an agency means that most of the work I do is project-based. This means building a new design...

2015

Diamond grid layout with Sass

Since I started my career on the web, I’ve been building websites that follow standard grid layouts. It got to...

Using Responsive Images (Now)

When the concept of responsive design came about, developers and designers have been trying to find ways to deal with...

The basics of CSS transforms: Part 1

The specification for CSS transforms had been in the works since 2009. There were separate specifications for CSS 2D transformations,...

Drupal 101: A simple image carousel

The first Drupal 7 project I worked on had to have an image carousel with one of those dot pagers...

Why you should be excited about CSS shapes

This article has been translated to Chinese by 小八 on W3cplus. So I just listened to Jen Simmons’ interview on...