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. You can play it here. 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. …

Towards the end of last year, I wanted to work with Spotify’s music intelligence data about artists, tracks, and albums from its web API. 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. Check it out here! Here is the story:

Initial Set Up

The app is built on top of a server-side rendered React+Next architecture. Redux and Dataloader are used for managing fetching…

Inspired by CSS’s @import feature which imports style rules from other style sheets, popular CSS pre-processors like Sass, Less and Stylus 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, Sass, Less and Stylus output any selectors declared in the imported files when generating the CSS.

Careless imports often lead to bloated, wasted CSS

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

With the imported typography…