<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:blogChannel="https://theodorusclarence.com/blog">
      <channel>
        <title>Theodorus Clarence Blog</title>
        <link>https://theodorusclarence.com/blog</link>
        <description>The Theodorus Clarence Blog, thoughts, mental models, and tutorials about front-end development.</description>
        <language>en</language>
        <ttl>40</ttl>
        <item>
      <title><![CDATA[Learning Web Development from YouTube]]></title>
      <description><![CDATA[List of youtuber channels that I watched to learn Web Development.]]></description>
      <link>https://theodorusclarence.com/blog/youtube-list</link>
      <guid>https://theodorusclarence.com/blog/youtube-list</guid>
      <pubDate>2021-01-20</pubDate>
    </item>
<item>
      <title><![CDATA[Looking at Vite, A Build Tool Faster than Create React App]]></title>
      <description><![CDATA[Create React App has always been the default for making a React Application, is there a faster way?]]></description>
      <link>https://theodorusclarence.com/blog/vite-cra</link>
      <guid>https://theodorusclarence.com/blog/vite-cra</guid>
      <pubDate>2021-05-02</pubDate>
    </item>
<item>
      <title><![CDATA[Styling Best Practices I Use With Tailwind CSS]]></title>
      <description><![CDATA[Tailwind CSS helped a lot when developing a consistent design cleanly and rapidly.]]></description>
      <link>https://theodorusclarence.com/blog/tailwindcss-best-practice</link>
      <guid>https://theodorusclarence.com/blog/tailwindcss-best-practice</guid>
      <pubDate>2022-01-12</pubDate>
    </item>
<item>
      <title><![CDATA[Understanding Swift's Value and Reference Types]]></title>
      <description><![CDATA[In-depth explanation of Swift's value and reference types.]]></description>
      <link>https://theodorusclarence.com/blog/swift-value-reference</link>
      <guid>https://theodorusclarence.com/blog/swift-value-reference</guid>
      <pubDate>2022-05-10</pubDate>
    </item>
<item>
      <title><![CDATA[How to show Now Playing in Spotify with Next.js]]></title>
      <description><![CDATA[Spotify API grants us access to know what is currently played on your Spotify.]]></description>
      <link>https://theodorusclarence.com/blog/spotify-now-playing</link>
      <guid>https://theodorusclarence.com/blog/spotify-now-playing</guid>
      <pubDate>2021-11-12</pubDate>
    </item>
<item>
      <title><![CDATA[7 Form Components For React Hook Form I Always Use]]></title>
      <description><![CDATA[Building forms with validation is tedious and repetitive, using reusable component will help building faster.]]></description>
      <link>https://theodorusclarence.com/blog/rhf</link>
      <guid>https://theodorusclarence.com/blog/rhf</guid>
      <pubDate>2022-04-02</pubDate>
    </item>
<item>
      <title><![CDATA[React Loading State Pattern using Toast & SWR]]></title>
      <description><![CDATA[Easily manage react loading state with React Hot Toast and SWR custom hooks.]]></description>
      <link>https://theodorusclarence.com/blog/react-loading-state-pattern</link>
      <guid>https://theodorusclarence.com/blog/react-loading-state-pattern</guid>
      <pubDate>2021-11-13</pubDate>
    </item>
<item>
      <title><![CDATA[A look at React hydration and pre-rendered HTML]]></title>
      <description><![CDATA[Learn how React hydration works and how to troubleshoot the hydration error]]></description>
      <link>https://theodorusclarence.com/blog/react-hydration</link>
      <guid>https://theodorusclarence.com/blog/react-hydration</guid>
      <pubDate>2023-12-06</pubDate>
    </item>
<item>
      <title><![CDATA[React Core Concept II: useEffect]]></title>
      <description><![CDATA[An in-depth look at the useEffect hook in React with a mental model]]></description>
      <link>https://theodorusclarence.com/blog/react-core-concept-useeffect</link>
      <guid>https://theodorusclarence.com/blog/react-core-concept-useeffect</guid>
      <pubDate>2022-11-02</pubDate>
    </item>
<item>
      <title><![CDATA[React Core Concept I: Rendering & useState]]></title>
      <description><![CDATA[Do you wonder why do we use hook instead of normal variable? This will help you redefine some concepts.]]></description>
      <link>https://theodorusclarence.com/blog/react-core-concept-rendering-state</link>
      <guid>https://theodorusclarence.com/blog/react-core-concept-rendering-state</guid>
      <pubDate>2021-11-29</pubDate>
    </item>
<item>
      <title><![CDATA[One-stop Starter to Maximize Efficiency on Next.js & Tailwind CSS Projects]]></title>
      <description><![CDATA[Increase your efficiency by using preconfigured starter repository, with rich development features and automations.]]></description>
      <link>https://theodorusclarence.com/blog/one-stop-starter</link>
      <guid>https://theodorusclarence.com/blog/one-stop-starter</guid>
      <pubDate>2022-01-05</pubDate>
    </item>
<item>
      <title><![CDATA[Create React App vs Next.js]]></title>
      <description><![CDATA[What's the difference between Next.js and Create React App?]]></description>
      <link>https://theodorusclarence.com/blog/nextjs-vs-cra</link>
      <guid>https://theodorusclarence.com/blog/nextjs-vs-cra</guid>
      <pubDate>2021-01-19</pubDate>
    </item>
<item>
      <title><![CDATA[How to set up Storybook with Next.js and Tailwind CSS]]></title>
      <description><![CDATA[Complete configuration and setup for Storybook with Next.js and Tailwind CSS]]></description>
      <link>https://theodorusclarence.com/blog/nextjs-storybook-tailwind</link>
      <guid>https://theodorusclarence.com/blog/nextjs-storybook-tailwind</guid>
      <pubDate>2022-01-13</pubDate>
    </item>
<item>
      <title><![CDATA[Next.js Redirect Without Flashing Content]]></title>
      <description><![CDATA[Next.js is a static site by default, so redirecting unauthenticated user sometimes can be a problem.]]></description>
      <link>https://theodorusclarence.com/blog/nextjs-redirect-no-flashing</link>
      <guid>https://theodorusclarence.com/blog/nextjs-redirect-no-flashing</guid>
      <pubDate>2021-05-18</pubDate>
    </item>
<item>
      <title><![CDATA[How to choose between Next.js CSR, SSR, SSG, and ISR]]></title>
      <description><![CDATA[4 Metrics and examples of how to choose the right fetch method for the right case.]]></description>
      <link>https://theodorusclarence.com/blog/nextjs-fetch-usecase</link>
      <guid>https://theodorusclarence.com/blog/nextjs-fetch-usecase</guid>
      <pubDate>2021-11-12</pubDate>
    </item>
<item>
      <title><![CDATA[Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)]]></title>
      <description><![CDATA[Thorough explanation on Next.js data fetching method such as CSR, SSR, SSG, and ISR.]]></description>
      <link>https://theodorusclarence.com/blog/nextjs-fetch-method</link>
      <guid>https://theodorusclarence.com/blog/nextjs-fetch-method</guid>
      <pubDate>2023-07-20</pubDate>
    </item>
<item>
      <title><![CDATA[The biggest Next.js boilerplates of 2023]]></title>
      <description><![CDATA[The top Next.js boilerplates from several tech stacks to match with your needs]]></description>
      <link>https://theodorusclarence.com/blog/nextjs-boilerplate-2023</link>
      <guid>https://theodorusclarence.com/blog/nextjs-boilerplate-2023</guid>
      <pubDate>2023-04-10</pubDate>
    </item>
<item>
      <title><![CDATA[Next.js Authentication using Higher-Order Components]]></title>
      <description><![CDATA[Solve problems such as colocation, and error-prone code]]></description>
      <link>https://theodorusclarence.com/blog/nextjs-auth-hoc</link>
      <guid>https://theodorusclarence.com/blog/nextjs-auth-hoc</guid>
      <pubDate>2023-03-10</pubDate>
    </item>
<item>
      <title><![CDATA[Nesting a Button Inside a Link]]></title>
      <description><![CDATA[Discover whether you can nest a <button> element inside an <a> tag.]]></description>
      <link>https://theodorusclarence.com/blog/nesting-button-inside-link</link>
      <guid>https://theodorusclarence.com/blog/nesting-button-inside-link</guid>
      <pubDate>2024-09-28</pubDate>
    </item>
<item>
      <title><![CDATA[Curated List of Browser Extension I Personally Use]]></title>
      <description><![CDATA[These great extensions helped me a lot during development, especially number 1 and 5. I encourage you to try it.]]></description>
      <link>https://theodorusclarence.com/blog/my-addons</link>
      <guid>https://theodorusclarence.com/blog/my-addons</guid>
      <pubDate>2021-04-24</pubDate>
    </item>
<item>
      <title><![CDATA[Mindfully Commit with a Descriptive Message]]></title>
      <description><![CDATA[These guides and set of rules can help us to understand what is going on just by looking at the git log.]]></description>
      <link>https://theodorusclarence.com/blog/mindful-commit-message</link>
      <guid>https://theodorusclarence.com/blog/mindful-commit-message</guid>
      <pubDate>2021-09-18</pubDate>
    </item>
<item>
      <title><![CDATA[List Animation using Motion for React]]></title>
      <description><![CDATA[An in-depth guide on how to animate enter and exit animation for list using Motion for React (previously Framer Motion).]]></description>
      <link>https://theodorusclarence.com/blog/list-animation</link>
      <guid>https://theodorusclarence.com/blog/list-animation</guid>
      <pubDate>2024-12-17</pubDate>
    </item>
<item>
      <title><![CDATA[Gradient Border is Unexpectedly Hard]]></title>
      <description><![CDATA[A simple gradient border is not as simple as it seems.]]></description>
      <link>https://theodorusclarence.com/blog/gradient-border-is-hard</link>
      <guid>https://theodorusclarence.com/blog/gradient-border-is-hard</guid>
      <pubDate>2024-07-14</pubDate>
    </item>
<item>
      <title><![CDATA[How to Create Fully Reusable React Components]]></title>
      <description><![CDATA[Creating a component is fairly easy, but doing them correctly is a different story.]]></description>
      <link>https://theodorusclarence.com/blog/fully-reusable-components</link>
      <guid>https://theodorusclarence.com/blog/fully-reusable-components</guid>
      <pubDate>2024-04-21</pubDate>
    </item>
<item>
      <title><![CDATA[Back to Basic: UI Design Fundamental]]></title>
      <description><![CDATA[7 fundamental that you can really use to make your design better]]></description>
      <link>https://theodorusclarence.com/blog/btb-ui-fundamental</link>
      <guid>https://theodorusclarence.com/blog/btb-ui-fundamental</guid>
      <pubDate>2021-02-04</pubDate>
    </item>
<item>
      <title><![CDATA[Back to Basic: Should we use Rem, Em or Pixel?]]></title>
      <description><![CDATA[Differences between rem, em, and px unit, and some use cases]]></description>
      <link>https://theodorusclarence.com/blog/btb-rem-em</link>
      <guid>https://theodorusclarence.com/blog/btb-rem-em</guid>
      <pubDate>2021-03-11</pubDate>
    </item>
<item>
      <title><![CDATA[Back to Basic: Flexbox or Grid?]]></title>
      <description><![CDATA[My practice on how to choose between flexbox and grid.]]></description>
      <link>https://theodorusclarence.com/blog/btb-flexbox-grid</link>
      <guid>https://theodorusclarence.com/blog/btb-flexbox-grid</guid>
      <pubDate>2021-01-29</pubDate>
    </item>
<item>
      <title><![CDATA[Back To Basic: Mental Model to Understand Flexbox ]]></title>
      <description><![CDATA[These are the mental models that I use to really understand flexbox, and I hope these can help you to understand too.]]></description>
      <link>https://theodorusclarence.com/blog/btb-flex-mental-model</link>
      <guid>https://theodorusclarence.com/blog/btb-flex-mental-model</guid>
      <pubDate>2021-07-19</pubDate>
    </item>
<item>
      <title><![CDATA[Advanced React Patterns]]></title>
      <description><![CDATA[List of react advanced patterns complete with examples.]]></description>
      <link>https://theodorusclarence.com/blog/advanced-react-patterns</link>
      <guid>https://theodorusclarence.com/blog/advanced-react-patterns</guid>
      <pubDate>2024-03-03</pubDate>
    </item>
<item>
      <title><![CDATA[The 2025 Retrospective]]></title>
      <description><![CDATA[Travels, Three Diving Licenses, and Trading Money for Memories]]></description>
      <link>https://theodorusclarence.com/blog/2025-retrospective</link>
      <guid>https://theodorusclarence.com/blog/2025-retrospective</guid>
      <pubDate>2025-12-31</pubDate>
    </item>
<item>
      <title><![CDATA[The 2024 Retrospective]]></title>
      <description><![CDATA[First Full-Time Year, Solo Travel while Working, Socializing, and more!]]></description>
      <link>https://theodorusclarence.com/blog/2024-retrospective</link>
      <guid>https://theodorusclarence.com/blog/2024-retrospective</guid>
      <pubDate>2024-12-31</pubDate>
    </item>
<item>
      <title><![CDATA[The 2023 Retrospective]]></title>
      <description><![CDATA[Graduation, Tech Writing, First Job, Mentorship, and more!]]></description>
      <link>https://theodorusclarence.com/blog/2023-retrospective</link>
      <guid>https://theodorusclarence.com/blog/2023-retrospective</guid>
      <pubDate>2023-12-31</pubDate>
    </item>
<item>
      <title><![CDATA[The 2022 Retrospective]]></title>
      <description><![CDATA[Surabaya, Covid, Apple Developer Academy, Projects and more]]></description>
      <link>https://theodorusclarence.com/blog/2022-retrospective</link>
      <guid>https://theodorusclarence.com/blog/2022-retrospective</guid>
      <pubDate>2022-12-31</pubDate>
    </item>
<item>
      <title><![CDATA[The 2021 Retrospective]]></title>
      <description><![CDATA[My retrospective of the year of 2021. Achievements, recognitions, and lessons learned.]]></description>
      <link>https://theodorusclarence.com/blog/2021-retrospective</link>
      <guid>https://theodorusclarence.com/blog/2021-retrospective</guid>
      <pubDate>2021-12-31</pubDate>
    </item>
      </channel>
    </rss>