The Blog
Thoughts, mental models, and tutorials about front-end development.
December 17, 2024
List Animation using Motion for React
An in-depth guide on how to animate enter and exit animation for list using Motion for React (previously Framer Motion).
6 min read
––– views
September 28, 2024
Nesting a Button Inside a Link
Discover whether you can nest a <button> element inside an <a> tag.
4 min read
––– views
July 14, 2024
Gradient Border is Unexpectedly Hard
A simple gradient border is not as simple as it seems.
4 min read
––– views
April 21, 2024
How to Create Fully Reusable React Components
Creating a component is fairly easy, but doing them correctly is a different story.
9 min read
––– views
March 03, 2024
Advanced React Patterns
List of react advanced patterns complete with examples.
10 min read
––– views
December 31, 2023
The 2023 Retrospective
Graduation, Tech Writing, First Job, Mentorship, and more!
7 min read
––– views
December 06, 2023
A look at React hydration and pre-rendered HTML
Learn how React hydration works and how to troubleshoot the hydration error
7 min read
––– views
July 20, 2023
Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)
Thorough explanation on Next.js data fetching method such as CSR, SSR, SSG, and ISR.
10 min read
––– views
April 10, 2023
The biggest Next.js boilerplates of 2023
The top Next.js boilerplates from several tech stacks to match with your needs
10 min read
––– views
March 10, 2023
Next.js Authentication using Higher-Order Components
Solve problems such as colocation, and error-prone code
7 min read
––– views
December 31, 2022
The 2022 Retrospective
Surabaya, Covid, Apple Developer Academy, Projects and more
6 min read
––– views
November 02, 2022
React Core Concept II: useEffect
An in-depth look at the useEffect hook in React with a mental model
6 min read
––– views
May 10, 2022
Understanding Swift's Value and Reference Types
In-depth explanation of Swift's value and reference types.
8 min read
––– views
April 02, 2022
7 Form Components For React Hook Form I Always Use
Building forms with validation is tedious and repetitive, using reusable component will help building faster.
2 min read
––– views
January 13, 2022
How to set up Storybook with Next.js and Tailwind CSS
Complete configuration and setup for Storybook with Next.js and Tailwind CSS
5 min read
––– views
January 12, 2022
Styling Best Practices I Use With Tailwind CSS
Tailwind CSS helped a lot when developing a consistent design cleanly and rapidly.
9 min read
––– views
January 05, 2022
One-stop Starter to Maximize Efficiency on Next.js & Tailwind CSS Projects
Increase your efficiency by using preconfigured starter repository, with rich development features and automations.
9 min read
––– views
December 31, 2021
The 2021 Retrospective
My retrospective of the year of 2021. Achievements, recognitions, and lessons learned.
11 min read
––– views
November 29, 2021
React Core Concept I: Rendering & useState
Do you wonder why do we use hook instead of normal variable? This will help you redefine some concepts.
12 min read
––– views
November 13, 2021
React Loading State Pattern using Toast & SWR
Easily manage react loading state with React Hot Toast and SWR custom hooks.
7 min read
––– views
November 12, 2021
How to show Now Playing in Spotify with Next.js
Spotify API grants us access to know what is currently played on your Spotify.
5 min read
––– views
November 12, 2021
How to choose between Next.js CSR, SSR, SSG, and ISR
4 Metrics and examples of how to choose the right fetch method for the right case.
11 min read
––– views
September 18, 2021
Mindfully Commit with a Descriptive Message
These guides and set of rules can help us to understand what is going on just by looking at the git log.
7 min read
––– views
July 19, 2021
Back To Basic: Mental Model to Understand Flexbox
These are the mental models that I use to really understand flexbox, and I hope these can help you to understand too.
6 min read
––– views
May 18, 2021
Next.js Redirect Without Flashing Content
Next.js is a static site by default, so redirecting unauthenticated user sometimes can be a problem.
5 min read
––– views
May 02, 2021
Looking at Vite, A Build Tool Faster than Create React App
Create React App has always been the default for making a React Application, is there a faster way?
4 min read
––– views
April 24, 2021
Curated List of Browser Extension I Personally Use
These great extensions helped me a lot during development, especially number 1 and 5. I encourage you to try it.
3 min read
––– views
March 11, 2021
Back to Basic: Should we use Rem, Em or Pixel?
Differences between rem, em, and px unit, and some use cases
3 min read
––– views
February 04, 2021
Back to Basic: UI Design Fundamental
7 fundamental that you can really use to make your design better
3 min read
––– views
January 29, 2021
Back to Basic: Flexbox or Grid?
My practice on how to choose between flexbox and grid.
7 min read
––– views
January 20, 2021
Learning Web Development from YouTube
List of youtuber channels that I watched to learn Web Development.
5 min read
––– views
January 19, 2021
Create React App vs Next.js
What's the difference between Next.js and Create React App?
4 min read
––– views
New Blog Post
20m ago
Mastering Gradient Borders in CSS 🌈✨
A talk is happening
2h ago
Sharing My 2023 Retrospective
New Blog Post
4h ago
and many more!