Collection of posts I wrote about design process, technology and productivity.

    PrevNext Blog Component for NextJS Using ContentLayer

    Using ContentLayer, it's easy to create a Prev & Next component if you want to encourage users to read one blog article and then the order. All it takes are two simple step. 1. Create related posts lo

    Migrating from Gatsby to Next.js 14

    This website has entered v3 of its iteration! v2 was created using Gatsby and integrated with my previous design resources ``. Entering v3, I'm migrating the website from Gatsby to Next.js 1

    Combine Tailwind Classnames without Conflict

    One of the drawback of adopting Tailwind is spotting invalid classnames and combining styles according props. Cn function propose by ByteGrad help merging classnames and accept arguments. https://ww

    Senior Designer

    A read from ADPList's substack There's even a designer matrix for your own reference

    Next Gen Calendar App - From Cron to Notion Calendar

    Cron, my daily calendar app, was rebranded as Notion Calendar last week after it was acquired. While I'm not a big fan of the new branding, it's incredible to see how an indie favorite calendar has be

    Making Isometric Graphics In Figma

    Just want to bookmark this piece of of golden rule for making isometric stuff. You don't need a fancy template. Just create your own isometric graphic with a skewing Figma plugin (like SkewDat ) and r

    2022 Q1 Reflection & Progress

    It's a new year and quite a lot has been achieved this quarter. First of all, I have wrote my personal blog from scratch using NextJS as part of my practice. The hardest part was the API and synchroni


    - Added all categories in resources page - Updated responsive typography sizes using fluid typography with clamp - Add PrismJS for codeblock - Incorporated digital garden setup by accepting Markdown f

    Fluid Typography

    I recall making font sizes fluid and scale in ratio according to the viewport was not an easy task few years ago. Here's the formula I had bookmarked from ```css body { font-size: cal

    Redesigning for Health Check Report

    How would you design a body check report? Last month, i received a physical copy of my body check result. Embracing “product designer” mindset had me rethink on the experience of body check. There co

    Building Gatsby Starter for Digital Garden

    Skip to bottom if you are already using Obsidian You cannot connect the dots by looking forward. You can only connect them by looking backward. <cite>- Steve Jobs</cite> I jotted down this quote from

    How Might We

    Summary: Framework to ask the right questions to generate new & good ideas Nielson Normal Tips: - Avoid Suggesting a Solution - Keep Your HMWs Broad - Focus Your HMWs on the Desired Outcome - Phrase

    Design Thinking



    - Users: You're not designing for everyone, define your users properly - Needs: Do not mix solution with need, what they need can be solved by multiple solutions - Insights: Relevant insights After PO


    Messing with RSS feed recently (as NextJS do not have any official RSS parser plugin) , I realised Chinese URL links generated were not validated. UTF-8 encoded Chinese characters were not considered

    Introduction On My Notetaking & Writing Setup

    Being an early adopter of tools, one field that I cannot stop trying is the note-taking apps. The spectrum of note-taking apps has expanded quickly over the past 5 years. What I’m using now: For writi

    Why should you create a website

    Have you been relying on social media to promote your content? How did you cope with the uprising of new platforms? Discussion of decentralising the web has been going on for a while. Creating your ow

    My Obsidian Practice

    My post will be divided in 3 categories - Knowledge: Factual and learnings of a certain topic - Reflection: Personal progress or reflection (90% original content) - Exploration: Gather list of externa

    Custom Fonts with Tailwind CSS in NextJS

    Next has released @next/font solution to integrate with google fonts as well as local fonts. Check out for the latest implement

    Create Sparkline Charts Without Any Code Using Sparks

    Sparkline is a tiny chart to visualise trends of a series of data values. After The Flood created Sparks font to generate sparkline chart using a line of text, no Excel or any design software is requi

    Design Better Search Box and Make Search Journey More User Friendly?

    Recently, I worked on a concept design for a Electric Vehicle Charging Map App. Here's a recap of my thinking process, — how to enhance usability for a Search Journey? At first thought, you may think

    2021 Q4 Reflection & Progress

    - #### [[Write 4 Blogs about coding and design]] - #### [[Join 3 tech meetups and conferences]] - Attended Frustrated Design Pattern workshop by SmashConf - Attended Figma's design system conferen

    2021 Q3 Reflection & Progress

    Lack of progress in Q3 as I was really busy with moving and settling down . It was only until the end of the quarter, that I have processed with a new target and set of tasks to complete. Therefore, m

    Try our Keystroke Figma template

    Introducing KEYSTROKE ⌨! My first Figma community template to create keycap quickly (with auto-layout support!). Quickly create keyboard shortcuts on Figma now! 1. Open figma community file 2. Click "

    Lets talk about Safari & Firefox design revamp

    Brand new Safari and Firefox were both announced this month. Both versions received major design iterations. Which do you prefer? Announced in WWDC, Apple's new Safari is more ground-breaking in terms

    Using Chrome DevTools for Color Accessibility

    One simple step to enhance your website's accessibility is checking your colors. 8% of all men suffer from color vision deficiency (0.5% in women), so 1 in 12 males that visited your website may exper

    Accessibility Toolkit Stark Launched Chrome Extension

    Stark has been a very helpful tool for creating accessible designs. The all-in-one accessibility toolkit has launched Chrome version after focusing on design platforms like Figma, Sketch and Adobe XD.

    Design Documentaries

    Catching up with some design documentaries in the last few months during quarantine, here's my recommended list! The two-season documentary series highlight artists across various fields of design. Ea

    How do you save your inspirations?

    Recently I discovered, a bookmark manager developed with designers in mind. There are multi-purpose views that you can set for each collection, Like List, Headlines Grid, Moodboard. Of cou

    Good Product Is Not Earning Every Dollar

    Good Product is not earning every dollar. Netflix recently announced they will start cancelling inactive subscriptions, Slack also carry out "Fair Billing Policy" to charge only active users in paid p

    What is sitemap and how does it enhance user experience?

    Simply put, sitemap is a list of pages of a website. It displays how your website is structured visually. Laying out sitemap can help you to improve your website navigation, you can also spot out the

    3 Quick Wins To Make Your Website Accessible

    The first tip from @juxtdesign is Accessibility ✌️ ! Accessibility matters because making your site accessible meaning even more people (more than 1 billion disabled people in the world 🧑‍🦯🧏🧑‍🦽)

    Infographics of US Elections

    Let's take a moment to appreciate the design of infographics and interactive websites created by major news outlet for the 2020 US Elections.

    Weekly Design Documentaries Free Streaming — Helvetica

    Independent film director Gary Hustwit announced to offer free streaming of his past work to encourage people staying home. First title would be his typography documentary Helvetica (2007).