The value of live web design
Over the years, I’ve regularly seen blog posts or articles talking about “should designers code?” (less of …
My ideal frontend interview
I’ll be the first to admit that I think I’m terrible at tech interviews. I never had a proper computer science …
New animation possibilities with View Transitions
Web applications these days are becoming more complex, thus having smooth transitions between view states as a form of functional …
Customising content markdown via frontmatter in Astro
The use case I had for this was to have customisable bits of a content collection that was rendered from markdown.
State of CSS survey 2023 is live!
I’m excited to share with everyone that the State of CSS survey for 2023 has gone live! Yes, it is slightly earlier in the …
Debugging Firefox on Android
I just figured out how to get my Android phone recognised by Android Debug Bridge (adb) on my MacBook, which finally allowed me to …
So your designer wants stuff to overlap
I started my first full-time web developer job back in September of 2013 (not counting the period where I built random sites for …
Hacking background-clip with gradient colour stops
Before we get into all the hacking and unorthodox ways of doing things, let’s talk about background-clip: text properly. If …
The horizontal overflow problem
My good friend, Wei, has a pet peeve: unintended horizontal over-scrolling on mobile. Which is very different from intentional …
Can we enterprise CSS grid?
Regardless of whether the title of this blog post is grammatically correct or not, this is a question that I’ve had the …
CSS card shadow effects
Card-style components are pretty much still a thing these days, and there are many ways to make a bunch of identical rectangles …
CSS animation on button hover state
Recently, I came across an animation prototype on a button hover state and wanted to see if I could build it with just CSS.
@font-face fun times
I’m currently a member of the Chinese Text Layout Task Force | 中文排版需求, and we have monthly calls to discuss issues and work …
The many methods for using SVG icons
Recently at work, I ran into a situation where we had to revisit how SVG icons were being implemented on our pages.
Debugging vertical layouts in 2021
This blog has been around for more than 7 years. Where has the time gone? I first started messing around with vertical layouts …
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 …