Color quantization/approximation is a computer graphics process that reduces the number of colors required to represent an image while preserving the overall human-perceived quality.

Image for post
Image for post


Sudoku is one of my favorite logic-based number-placement puzzles. Due to the lack of quality Sudoku apps on the web and app stores, I decided to build my own version. It is packed with user-friendly and beginner-friendly features that make the game much more enjoyable. In this post, I will talk about designing, managing and working with the game’s state for the main UIs. You will read about how the right state design helps to keep the code clean and pleasant to work with. …


The story of why I built for

Towards the end of last year, I wanted to work with Spotify’s music intelligence data about artists, tracks, and albums from . Information about the listener’s top preferences, audio features of tracks and the genres classification on artists could produce some very insightful visualizations and engaging user interactions. With the help of GraphQL, I was able to iterate and scale a tiny React project into a fully-featured mobile-ready web app. Here is the story:

Initial Set Up

The app is built on top of a server-side rendered architecture. and are used for managing fetching, dependencies, caching and batching of the Spotify data. …


@import directive tips for , and

Inspired by CSS’s feature which imports style rules from other style sheets, popular CSS pre-processors like , and all have their own @import directives. They are powerful ways to start putting together modular stylesheets using variables, mixins and other features of each pre-processors. To use them properly we should:

Take great care when using @import directives:

By default, , and output any selectors declared in the imported files when generating the CSS.

Image for post
Image for post

Careless imports often lead to bloated, wasted CSS

Let’s take a look at this example file intend to generate 3 classes:

page.less — a simple stylesheet with three classes to use for decorating elements

With the imported typography module…

About

Sitian Liu

Chasing great designs, delightful user experiences and happy developer experiences. Find me at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store