Blog
Thoughts, mental models, and tutorials about front-end development.
The biggest Next.js boilerplates of 2023
8 min read––– viewsApril 10, 2023
The top Next.js boilerplates from several tech stacks to match with your needs
Next.js Authentication using Higher-Order Components
7 min read––– viewsMarch 10, 2023
Solve problems such as colocation, and error-prone code
React Core Concept II: useEffect
6 min read––– viewsNovember 02, 2022
An in-depth look at the useEffect hook in React with a mental model
How to set up Storybook with Next.js and Tailwind CSS
4 min read––– viewsJanuary 13, 2022
Complete configuration and setup for Storybook with Next.js and Tailwind CSS
Styling Best Practices I Use With Tailwind CSS
9 min read––– viewsJanuary 12, 2022
Tailwind CSS helped a lot when developing a consistent design cleanly and rapidly.
React Core Concept I: Rendering & useState
12 min read––– viewsNovember 29, 2021
Do you wonder why do we use hook instead of normal variable? This will help you redefine some concepts.
React Loading State Pattern using Toast & SWR
7 min read––– viewsNovember 13, 2021
Easily manage react loading state with React Hot Toast and SWR custom hooks.
How to choose between Next.js CSR, SSR, SSG, and ISR
8 min read––– viewsOctober 19, 2021
4 Metrics and examples of how to choose the right fetch method for the right case.
Mindfully Commit with a Descriptive Message
7 min read––– viewsSeptember 18, 2021
These guides and set of rules can help us to understand what is going on just by looking at the git log.
Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)
9 min read––– viewsSeptember 02, 2021
Thorough explanation on Next.js data fetching method such as CSR, SSR, SSG, and ISR.
Back To Basic: Mental Model to Understand Flexbox
6 min read––– viewsJuly 19, 2021
These are the mental models that I use to really understand flexbox, and I hope these can help you to understand too.
Next.js Redirect Without Flashing Content
5 min read––– viewsMay 18, 2021
Next.js is a static site by default, so redirecting unauthenticated user sometimes can be a problem.
Looking at Vite, A Build Tool Faster than Create React App
4 min read––– viewsMay 02, 2021
Create React App has always been the default for making a React Application, is there a faster way?
Back to Basic: Should we use Rem, Em or Pixel?
3 min read––– viewsMarch 11, 2021
Differences between rem, em, and px unit, and some use cases
Back to Basic: UI Design Fundamental
3 min read––– viewsFebruary 04, 2021
7 fundamental that you can really use to make your design better
Back to Basic: Flexbox or Grid?
4 min read––– viewsJanuary 29, 2021
My practice on how to choose between flexbox and grid.
Learning Web Development from YouTube
5 min read––– viewsJanuary 20, 2021
List of youtuber channels that I watched to learn Web Development.
Create React App vs Next.js
4 min read––– viewsJanuary 19, 2021
What's the difference between Next.js and Create React App?
