Blog
Thoughts, mental models, and tutorials about front-end development.
Nesting a Button Inside a Link
4 min read––– viewsSeptember 28, 2024
Discover whether you can nest a <button> element inside an <a> tag.
Gradient Border is Unexpectedly Hard
4 min read––– viewsJuly 14, 2024
A simple gradient border is not as simple as it seems.
How to Create Fully Reusable React Components
9 min read––– viewsApril 21, 2024
Creating a component is fairly easy, but doing them correctly is a different story.
Advanced React Patterns
10 min read––– viewsMarch 03, 2024
List of react advanced patterns complete with examples.
The 2023 Retrospective
7 min read––– viewsJanuary 02, 2024
Graduation, Tech Writing, First Job, Mentorship, and more!
A look at React hydration and pre-rendered HTML
7 min read––– viewsDecember 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––– viewsJuly 20, 2023
Thorough explanation on Next.js data fetching method such as CSR, SSR, SSG, and ISR.
The biggest Next.js boilerplates of 2023
10 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
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.
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?
