Blog
Thoughts, mental models, and tutorials about front-end development.
Next.js Authentication using Higher-Order Components
7 min read––– viewsMarch 10, 2023
Solve problems such as colocation, and error-prone code
The 2022 Retrospective
6 min read––– viewsDecember 31, 2022
Surabaya, Covid, Apple Developer Academy, Projects and more
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
Understanding Swift's Value and Reference Types
8 min read––– viewsMay 10, 2022
In-depth explanation of Swift's value and reference types.
7 Form Components For React Hook Form I Always Use
2 min read––– viewsApril 02, 2022
Building forms with validation is tedious and repetitive, using reusable component will help building faster.
How to set up Storybook with Next.js and Tailwind CSS
5 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.
One-stop Starter to Maximize Efficiency on Next.js & Tailwind CSS Projects
9 min read––– viewsJanuary 05, 2022
Increase your efficiency by using preconfigured starter repository, with rich development features and automations.
The 2021 Retrospective
11 min read––– viewsDecember 31, 2021
My retrospective of the year of 2021. Achievements, recognitions, and lessons learned.
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 show Now Playing in Spotify with Next.js
5 min read––– viewsNovember 12, 2021
Spotify API grants us access to know what is currently played on your Spotify.
How to choose between Next.js CSR, SSR, SSG, and ISR
11 min read––– viewsNovember 12, 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?
Curated List of Browser Extension I Personally Use
3 min read––– viewsApril 24, 2021
These great extensions helped me a lot during development, especially number 1 and 5. I encourage you to try it.
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?
7 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?
