theodorusclarence / theodorusclarence.com

💠 Personal website and blog made using Next.js, TypeScript, Tailwind CSS, MDX Bundler, and Prisma with PostgreSQL

theodorusclarence.com

💠 Personal website and blog made using Next.js, TypeScript, Tailwind CSS, MDX Bundler, Prisma, and SWR.

Contributing & Project Setup

If you are interested in contributing or running this project on your local machine, please check the contributing guide

Notable Features

This website was first initialized in January 2021, went through numerous changes and refactors, resulted to some notable features

Dedicated Project Page

Each project is descriptively explained provided with my learnings.

Blogs & Library

I write to teach people how to rebuild and redefine fundamental concepts through mental models.

scrollspy-demo.mov

Lazy Blur Loader

Images are hosted on Cloudinary

blur-up.mov

Love Button Interaction

love.mov

Spotify Now Playing

Check out the tutorial.

theodorusclarence.com's Issues

demo gif is not available in the library/sticky-nav demo

https://github.com/theodorusclarence/theodorusclarence.com/blob/main/src/contents/library/sticky-nav.mdx

make all animations motion-safe

[BUG] Broken link to Enigmatics Finder project

Describe the bug
The link provided under Enigmatics Finder project on the side-projects page is broken.

Screenshots

Expected behavior
Make one of the below changes In Line 83 on src/contents/projects/side-projects.mdx

Option 1: Update the link from https://https//nrp.theodorusclarence.com to https://nrp.theodorusclarence.com

- [https://nrp.theodorusclarence.com](https://https://nrp.theodorusclarence.com)
+ [https://nrp.theodorusclarence.com](https://nrp.theodorusclarence.com)

Option 2: Update the link from https://https//nrp.theodorusclarence.com to https://nrp.thcl.dev

- [https://nrp.theodorusclarence.com](https://https://nrp.theodorusclarence.com)
+ [https://nrp.theodorusclarence.com](https://nrp.thcl.dev)

blog/btb-ui-fundamental

Back to Basic: UI Design Fundamental – theodorusclarence.com

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

https://theodorusclarence.com/blog/btb-ui-fundamental

add notiolink and ppdb sulsel

blog/tailwindcss-best-practice

Styling Best Practices I Use With Tailwindcss – theodorusclarence.com

Tailwindcss helped a lot when developing a consistent design cleanly and rapidly.

https://theodorusclarence.com/blog/tailwindcss-best-practice

i am getting this error while npm run build

./src/components/content/CustomCode.tsx
9:14 Error: Unknown property 'jsx' found react/no-unknown-property

./src/components/images/CloudinaryImg.tsx
92:16 Error: Unknown property 'jsx' found react/no-unknown-property

./src/pages/_document.tsx
1:1 Error: next/document should not be imported outside of pages/_document.js. See https://nextjs.org/docs/messages/no-document-import-in-page. @next/next/no-document-import-in-page

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Linting and checking validity of types

add devto details

incorporate localStorage for recommendation

generate personalized recommendation, by tracking articles read on localStorage

component storybook

Provide documentation for all components

• Improve experience on storybook

prettier sort

blog/nextjs-fetch-method

Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) – theodorusclarence.com

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

https://theodorusclarence.com/blog/nextjs-fetch-method

tailwindcss-best-practice-date-ios

it broke ios because of yyyy-mm-d

giscus not re-rendering when navigating with <link>

similar problem with #194

blog/btb-flexbox-grid

Back to Basic: Flexbox or Grid? – theodorusclarence.com

My practice on how to choose between flexbox and grid.

https://theodorusclarence.com/blog/btb-flexbox-grid

blog/btb-rem-em

Back to Basic: Should we use Rem, Em or Pixel? – theodorusclarence.com

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

https://theodorusclarence.com/blog/btb-rem-em

blog/nextjs-vs-cra

Create React App vs Next.js – theodorusclarence.com

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

https://theodorusclarence.com/blog/nextjs-vs-cra

Nice website TC, I was just wondering how do your get your cloudinary images to be displayed in this website..I have tried so many times but cannot find any way..did you an api ?

Nice website TC, I was just wondering how do your get your cloudinary images to be displayed in this website..I have tried so many times but cannot find any way..did you an api ?

Originally posted by @MedX101 in #199 (comment)

cypress flaky test

Blog

when theme changes to dark or light comments reloads

I don't have more to say. When I click on button to change theme comments reloads on blog page

blog/vite-cra

Looking at Vite, A Build Tool Faster than Create React App – theodorusclarence.com

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

https://theodorusclarence.com/blog/vite-cra

seasforus project

migrate to tailwind sorter

blog/youtube-list

Learning Web Development from YouTube – theodorusclarence.com

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

https://theodorusclarence.com/blog/youtube-list

table of content is not updated when navigating using recommended cards

implement new og

table of contents scrollspy

https://github.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/block.tsx#L128-L161

cypress spotify spec

twitter-embed

cache header & zod schema

Help with deploying;)

Hey, I was trying to deploy website to Vercel, but I got this build output with error, could you please help me with that?

lack of env causes build error

sort feature for blogs

Sort by date (easy)
and sort by likes (need to fetch all likes and views data from fauna, then sort).

How you are styling the mdx content?

I am trying to implement but this is the output

I also added the this css file of yours but still

import '@/styles/dracula.css';
import '@/styles/globals.css';
import '@/styles/mdx.css';

blog/my-addons

Curated List of Browser Extension I Personally Use – theodorusclarence.com

These great extensions helped me a lot during development, especially number 1 and 5. I encourage you to try it.

https://theodorusclarence.com/blog/my-addons

blog/rhf

7 Form Components For React Hook Form I Always Use – theodorusclarence.com

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

https://theodorusclarence.com/blog/rhf

Need Help

I was trying to implement this and did it successfully.

diffrent color for the border what ever I need

import * as React from 'react';

export default function CustomBlockQuote(
  props: React.ComponentPropsWithRef<'blockquote'>
) {
  const content = (props.children as Array<React.ReactElement>)[1]?.props
    .children;
  const data = content.split('---');
  if ((content as string).includes('---'))
    return <blockquote className={`color-${data[0]}`}>{data[1]}</blockquote>;
  return <blockquote>{content}</blockquote>;
}

## Introduction

> Using Rem and Em units is better than using px.

> red---hey there

.prose blockquote.color-red {
  border-image: linear-gradient(to top, #ff0062, #f35900, #fdcf00) 1;
}

Is this good way to do or you suggest something else.?

abandoned

Back To Basic: Mental Model to Understand Flexbox – theodorusclarence.com

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

https://theodorusclarence.com/blog/btb-flex-mental-model?utterances=35eb0c90b3bee3b3b662141e2gKi3JYP4b2hra%2BZjA3BpyOE7QMZ41zo%2FUOXYQYzJcUkB2Dq5LC22l%2B75%2BuP154AvKXp6HYtSnEjXuITQmHsqFvTm5L6XM089oBf5gLYupseBMsEdbUfiqrZhJ0%3D

migrate to prisma & sql db

Probably use planet scale, or cockroachDB for the serverless

Things to consider:

• Using prisma, we can track the date of the views in a table, this can be used as an additional stat
• It's going to take some time to migrate it (probably)

blog/btb-flex-mental-model

Back To Basic: Mental Model to Understand Flexbox – theodorusclarence.com

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

https://theodorusclarence.com/blog/btb-flex-mental-model

Depfu Error: No dependency files found

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

• Go to the Settings page of either your own account or the organization you've used
• Go to "Installed Integrations"
• Click the "Configure" button on the Depfu integration
• Remove this repo (theodorusclarence/theodorusclarence.com) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

---

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

add total statistics

blog/nextjs-redirect-no-flashing

Next.js Redirect Without Flashing Content – theodorusclarence.com

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

https://theodorusclarence.com/blog/nextjs-redirect-no-flashing

need help in setting up database

can you please help me to setup database to your repo , i made a postgresql database on supabase now i am not able to connect it to code, please help me,your project is very much awesome i want to work on it in my way, i am currently learning front end to not much idea about backend

blog/spotify-now-playing

How to show Now Playing in Spotify with Next.js – theodorusclarence.com

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

https://theodorusclarence.com/blog/spotify-now-playing

[BUG] Duplicate project image in side-projects page

Describe the bug
The project Enigmatics Finder you displayed on the side-projects page is using the same screenshot image of WhatsApp Helper.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://theodorusclarence.com/projects/side-projects#enigmatics-finder
2. It's using WhatsApp Helper project's screenshot image.

Screenshots

See both project's screenshot image are same 👇

       

Expected behavior
Update the Enigmatics Finder screenshot image to like below one 👇