On fixed elements and backgrounds

I thought this was going to be a short-ish note on fixed positioning and jank, but as with almost everything I write, it grew into …

The one in black and orange

It’s been a couple months since my last proper “ship-to-production” layout project (the last one being the React …

CSS for internationalisation

I’ve come across people who do not think that CSS is related to internationalisation at all, but if you think about it, …

Flexbox and absolute positioning

Recently, I’ve been trying to build an open source video conferencing application specifically for online meetups. Just like …

Can you make a countdown timer in pure CSS?

I must first apologise for the somewhat rhetorical question as the title. About 3 minutes after I wrote it, my brain exclaimed: …

Is your browser a polyglot?

Over the course of last year, I’ve gone over to Wei‘s workplace numerous times to disturb her and her colleagues …

Understanding positioning in CSS

I was at JSConf China earlier this year, which happened in Shanghai from 19–20 Oct. There was fairly decent representation from …

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 at a conference outside …

DevTools as the ultimate CSS advocate

I’ve just come off the Mozilla Developer Roadshow, and it’s the third one I’ve done so far. As a Mozilla …

The one which is impossible to spell

Some people may be aware that I run the local CSS meetup in Singapore. A few more may know that we’ve recently celebrated 4 …

Box alignment and overflow

Recently I was working on a few chat interfaces, and the general layout is typical to what you would see in most chat …

The wondrous world of CSS counters

The Chinese Layout Task Force works on the Requirements for Chinese Text Layout, and we have monthly calls to discuss issues and …

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 of the …

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 event, I had a …

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 Conference taking place in …

Flexbox and padding

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

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 naming …

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 was the …

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. If you didn’t, you …

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 events outside my home base of …

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 a really interesting …

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 using Grid layout.

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 either a handful of …

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 physical world.

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 October morning back …

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 involved creating …

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 a full-featured presentation …

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 for 2019 (at CSSConf China) will …

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 comparative …

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 term Intrinsic Web Design, and …

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 Lakatos.

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 …

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 awesome.

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 go to an …

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 can see …

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 experience.

Math and front-end

If you were one of those kids that wondered why you had to attend all those math classes and learn about angles and algebra, well, …

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 because I’ve …

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 the …

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 served me well yet …

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 Lin Clark and Jen …

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 one of the options for …

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. What came out …

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 someone who cringes when you hear the …

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 Rules Module …

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 that “I just …

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 complete …

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 will be updated as …

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 as …

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 know, CSS is my hobby.

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 of …

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 release of …

The one about home

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

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. I remember …

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 Singapore.

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 video of Ethan …

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 important CSS …

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, but it really …

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 every couple of months …

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 a point where …

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 issue of …

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 …

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 on its homepage.

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 the Boagworld …