css
CSS for internationalisation
I’ve come across people who do not think that CSS is related to internationalisation at all, but if you think...
Flexbox and absolute positioning
Recently, I’ve been trying to build an open source video conferencing application specifically for online meetups. Just like every other...
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...
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...
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...
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...
Box alignment and overflow
Recently I was working on a few chat interfaces, and the general layout is typical to what you would see...
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...
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....
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...
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...
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...
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...
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...