Theodorus Clarence Blog

Travels, Three Diving Licenses, and Trading Money for Memories

First Full-Time Year, Solo Travel while Working, Socializing, and more!

An in-depth guide on how to animate enter and exit animation for list using Motion for React (previously Framer Motion).

Discover whether you can nest a element inside an tag.

A simple gradient border is not as simple as it seems.

Creating a component is fairly easy, but doing them correctly is a different story.

List of react advanced patterns complete with examples.

Graduation, Tech Writing, First Job, Mentorship, and more!

Learn how React hydration works and how to troubleshoot the hydration error

Thorough explanation on Next.js data fetching method such as CSR, SSR, SSG, and ISR.

The top Next.js boilerplates from several tech stacks to match with your needs

Solve problems such as colocation, and error-prone code

Surabaya, Covid, Apple Developer Academy, Projects and more

An in-depth look at the useEffect hook in React with a mental model

In-depth explanation of Swift's value and reference types.

Building forms with validation is tedious and repetitive, using reusable component will help building faster.

Complete configuration and setup for Storybook with Next.js and Tailwind CSS

Tailwind CSS helped a lot when developing a consistent design cleanly and rapidly.

Increase your efficiency by using preconfigured starter repository, with rich development features and automations.

My retrospective of the year of 2021.

Do you wonder why do we use hook instead of normal variable?

Easily manage react loading state with React Hot Toast and SWR custom hooks.

4 Metrics and examples of how to choose the right fetch method for the right case.

Spotify API grants us access to know what is currently played on your Spotify.

These guides and set of rules can help us to understand what is going on just by looking at the git log.

These are the mental models that I use to really understand flexbox, and I hope these can help you to understand too.

Next.js is a static site by default, so redirecting unauthenticated user sometimes can be a problem.

Create React App has always been the default for making a React Application, is there a faster way?

These great extensions helped me a lot during development, especially number 1 and 5.

Differences between rem, em, and px unit, and some use cases

7 fundamental that you can really use to make your design better

My practice on how to choose between flexbox and grid.

List of youtuber channels that I watched to learn Web Development.

What's the difference between Next.js and Create React App?