- Projects
[Git] Managing My Personal Projects with a Commit Convention
I use a commit convention when writing commit titles in my personal projects. Here is my reference list of the types, from Feat and Fix to Rename and Remove.
- Projects
How I Fixed a 500 Error Caused by Next.js SSR
The cause of the 500 error was simple: with Next.js SSR, the API was called with the initial null latitude and longitude. Call it only when both values exist.
- Work
Optimizing SPA (Single Page Application) Page SEO with React Helmet
When I recently built the Ocean Freight page that lists Spot freight rates, I used React Helmet to manage its meta tags and also paid attention to its URL.
- Projects
Optimistic UI Update With useSWR
Today I learned about Optimistic UI Update in a Nomad Coders course, and I implemented it with the mutate function from useSWR.
- Work
Fixing CSS that breaks in Safari
I was put in charge of the publishing work (building the HTML and CSS markup) for a really important project.
- Tech notes
Next.js useRouter: push or replace
I learned something useful while building a hook that fetches and manages user information with useEffect(), so I'm writing it down.
- Work
Implementing Text ReadMore in WiniLogis Our Shipment
First, the spec asked that on mobile screens a Read more button appear when the text runs to 3 lines or more.
- Tech notes
How to view pretty-printed JSON data in Chrome
I wanted JSON data to be formatted when I made API calls in NextJS, so I looked for a Chrome tool and found JSONView.
- Projects
Fixing Twilio ERROR 21610 When Sending a Test Message
I got ERROR: 21610 when sending a Twilio test message. On a trial account, registering the allowed number under Verified Caller IDs lets the message go through.
- Projects
Next.js: accessing body data when sending a request with fetch
I sent the data validated through onValid in React Hook Form to pages / users / enter.tsx with fetch, and req.body came back undefined until I set Content-Type.
- Projects
Testing React Hook Form with Next.js
At work and in personal projects, I kept form inputs in state and wrote really long code for exceptions and errors. I think React Hook Form can simplify this.
- Work
Preventing Keyboard Input Events in MUI DatePicker
An admin feature used MUI DatePicker to select dates, and after an absurd date was typed in, the feature that sets today's date did not work properly.
- Projects
A Collection of Prisma CLI Commands
The Prisma and PlanetScale CLI commands I use, from logging in and the PlanetScale bridge connection to db push, Prisma Studio, and client generation.
- Projects
Image preview, delete, and drag-to-reorder in React
The key was handling onDragStart and onDragEnter events on each image, then reordering the images with splice() when onDragEnd fires.
- Projects
Connecting a PlanetScale DB with Prisma
Set up the schema.prisma file as below, then, assuming you're logged in and connected, push the schema to PlanetScale with npx prisma db push.
- Projects
PlanetScale CLI (fixing the zsh: command not found: brew error)
If you get the zsh: command not found: brew error when setting up the PlanetScale CLI, try following the steps below in order.
- Work
The world's simplest Skeleton UI with only HTML & CSS
Today a backend developer at work asked me to make a Skeleton UI as simply as possible, so I built one as quickly as I could.
- Work
React DatePicker date & time saving error
I was taking date and time input with React DatePicker, and picking a time after picking a date reset the date I had picked before.
- Tech notes
A regex to change a date like 20231228 into 2023-12-28
The backend sent dates like '20231228', and I wanted them as '2023-12-28'. I found an easy way to do it with a regex and replace().
- Work
Five Months of Challenge: An Outstanding Employee Award, Joy and Resolve
It has been five months since I joined the company on July 3, 2023, and I received the Outstanding Employee Award.
