Thoughts, mental models, and tutorials about front-end development.
The 2023 Retrospective7 min read––– views
January 02, 2024
Graduation, Tech Writing, First Job, Mentorship, and more!
How to Create Fully Reusable React Components9 min read––– views
December 14, 2023
Creating a component is fairly easy, but doing them correctly is a different story.
A look at React hydration and pre-rendered HTML7 min read––– views
December 06, 2023
Learn how React hydration works and how to troubleshoot the hydration error
Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)10 min read––– views
July 20, 2023
Thorough explanation on Next.js data fetching method such as CSR, SSR, SSG, and ISR.
The biggest Next.js boilerplates of 202310 min read––– views
April 10, 2023
The top Next.js boilerplates from several tech stacks to match with your needs
Next.js Authentication using Higher-Order Components7 min read––– views
March 10, 2023
Solve problems such as colocation, and error-prone code
The 2022 Retrospective6 min read––– views
December 31, 2022
Surabaya, Covid, Apple Developer Academy, Projects and more
React Core Concept II: useEffect6 min read––– views
November 02, 2022
An in-depth look at the useEffect hook in React with a mental model
Understanding Swift's Value and Reference Types8 min read––– views
May 10, 2022
In-depth explanation of Swift's value and reference types.
7 Form Components For React Hook Form I Always Use2 min read––– views
April 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 CSS5 min read––– views
January 13, 2022
Complete configuration and setup for Storybook with Next.js and Tailwind CSS
Styling Best Practices I Use With Tailwind CSS9 min read––– views
January 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 Projects9 min read––– views
January 05, 2022
Increase your efficiency by using preconfigured starter repository, with rich development features and automations.
The 2021 Retrospective11 min read––– views
December 31, 2021
My retrospective of the year of 2021. Achievements, recognitions, and lessons learned.
React Core Concept I: Rendering & useState12 min read––– views
November 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 & SWR7 min read––– views
November 13, 2021
Easily manage react loading state with React Hot Toast and SWR custom hooks.
How to show Now Playing in Spotify with Next.js5 min read––– views
November 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 ISR11 min read––– views
November 12, 2021
4 Metrics and examples of how to choose the right fetch method for the right case.
Mindfully Commit with a Descriptive Message7 min read––– views
September 18, 2021
These guides and set of rules can help us to understand what is going on just by looking at the git log.
Back To Basic: Mental Model to Understand Flexbox6 min read––– views
July 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 Content5 min read––– views
May 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 App4 min read––– views
May 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 Use3 min read––– views
April 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––– views
March 11, 2021
Differences between rem, em, and px unit, and some use cases
Back to Basic: UI Design Fundamental3 min read––– views
February 04, 2021
7 fundamental that you can really use to make your design better
Back to Basic: Flexbox or Grid?7 min read––– views
January 29, 2021
My practice on how to choose between flexbox and grid.
Learning Web Development from YouTube5 min read––– views
January 20, 2021
List of youtuber channels that I watched to learn Web Development.
Create React App vs Next.js4 min read––– views
January 19, 2021
What's the difference between Next.js and Create React App?
Join to the newsletter list
Don't miss out 😉. Get an email whenever I post, no spam.Subscribe Now