- Tech notes
A close look at Next.js rendering: CSR, SSR, SSG, ISR, and Hydration
Notes I put together while studying rendering in ASAP, a study group that meets once a week: the four Next.js rendering methods and Hydration.
- Work
Image transfer 31MB → 1.2MB: optimizing images with a CDN and srcset
I applied Akamai Image Manager to the image resources of WiniLogis and Autowini so that image format conversion and resizing are handled by the CDN.
- Work
Splitting React Core Libraries and Applying Akamai CDN Caching
To optimize performance in a React project, I split the React core libraries into a separate bundle called react-vendor.
- Work
Why Images Did Not Update After Deploy, and Applying Cache Busting
I replaced an image and deployed, but users kept seeing the old one. Refreshing the browser did not help, and other PCs also showed the old image for a while.
- Work
Improving infinite scroll search list state management with useInfiniteQuery
The Autowini unified search page shows a More search results button when there is a next page, and pressing it appends the next page of results.
- Work
An alternative to removing related videos in a YouTube iframe
The WiniLogis Ocean Freight detail page was playing a YouTube video through an iframe.
- Work
Autowini WEB Integration Project: Playwright E2E Tests + Claude Code Automation
In my previous post, I added Vitest and set up a unit testing environment for utility functions.
- Work
Fixing Page Transition Flicker (White Screen) When Using React Lazy + Suspense
While optimizing the performance of the WiniLogis project earlier, I applied code splitting.
- Work
Android WebView debugging: fixing the chrome://inspect Pending authentication error
I recently had to check a problem with a page shown in a WebView inside a native Android app.
- Projects
Frontend Kit: Adding an AI Chat Feature with Gemma 3 27B
Frontend Kit is a PWA web app for studying frontend interview questions as flashcards. Here is how I added an in-app AI chat with Gemma 3 27B.
- Work
Migrating WiniLogis from Webpack to Vite
While working on the WiniLogis project, I noticed that its dev environment took 39 seconds to start, much slower than the company's other Vite-based projects.
- Work
Building a React-based Keycloak theme and i18n with Keycloakify
While introducing Keycloak to the Autowini service, I customized the login screen with Keycloakify and added support for 15 languages.
- Work
Lighthouse in the 90s but still feels slow? Fixed with the Vercel region
My portfolio project is currently built on Next.js and Supabase, and it is deployed and managed through Vercel.
- Work
Building CI/CD for Autowini's Frontend on Bitbucket, Part 2
At Autowini, most of our frontend projects are now separated out and run on React.
- Work
Menus Collapsing on Filter Change, Fixed with TanStack Query placeholderData
A UX problem in the left Accordion menu of the Autowini filter search page led me to improve its structure with TanStack Query's placeholderData option.
- Work
Fixing duplicate meta tags in a React SPA by building a library (feat. react-head-safe)
While running a real service, I found that the initial meta tags defined in index.html and the meta tags created on page navigation were duplicated.
- Work
React i18n Build Size Optimization 2: Splitting Translations by Page
This continues my earlier post, React i18n Build Size Optimization 1. This time I split the translations by page so each page loads only what it needs.
- Work
Building CI/CD for Autowini's Frontend on Bitbucket, Part 1
Autowini has several frontend projects that we separated out and improved in React.
- Work
Removing Unused Translation Keys with GitHub Copilot
When managing multiple languages (i18n) in a project, unused translation keys are left behind every time a feature is changed or removed.
- Work
Adding a Vitest test system to the Autowini WEB integration project
web-www-front is an integration project at Autowini, created to separate the existing JSP-based legacy pages into React and improve them.
