ViewComponent Design System Lookbook Migration

Migrating a ViewComponent Design System to Lookbook — Rails 8 + Tailwind CSS 4 War Stories

I migrated 47 ViewComponents in a Rails 8 project to a warm orange theme and built a full Lookbook preview system. Here are the real issues I ran into. Background The project already had: 47 ViewComponents across 15 categories (input, layout, navigation, card, typography, etc.) CSS Custom Properties based design tokens (tokens.css) Tailwind CSS 4 + Propshaft asset pipeline The goal was to adopt a BMC (Buy Me a Coffee) inspired warm orange theme with a dark sidebar and stone palette, and build comprehensive Lookbook previews. ...

2026-03-10 · 4 min read · Seunghan

Chrome Extension Debugging Lessons — Domain Whitelist, Duplicate Listeners, Closure Pitfalls

When maintaining a Chrome extension, “this should definitely work, why doesn’t it?” comes up more often than expected. I made four consecutive mistakes in a short period, each with a different root cause. Writing them down. 1. A return in the dispatch block silently kills generic detection Content scripts typically end with a pattern like this: if (isSomeSpecificPage()) { doSomethingSpecific(); return; // ← exits here } // Generic DOM detection (MutationObserver, etc.) const observer = new MutationObserver(() => { ... }); observer.observe(document.body, { childList: true, subtree: true }); After adding a feature for a specific domain with an early return, the generic DOM detection never ran in a popup window on that domain. ...

2026-03-09 · 5 min read · Seunghan

Flutter BottomSheet Covers Navigation Bar — Fix It with showDialog

Using showModalBottomSheet for form input screens feels natural. But when your app has a bottom navigation bar, the sheet slides up and covers the navigation — it works functionally, but looks cluttered. Three issues were fixed in one go: Bottom sheet → centered modal conversion TextButton cancel button rendering in yellow (unreadable) PlatformException when sharing a SQLite file with share_plus Problem 1: BottomSheet Covers the Navigation Bar Symptom An input form built with showModalBottomSheet overlaps the bottom navigation bar when it slides up. Even with isScrollControlled: true, the sheet extends over the navigation area. ...

2026-03-09 · 4 min read · Seunghan

Flutter image_picker Camera/Gallery Bottom Sheet + Riverpod Frequency-Based Category Sorter

While building a civic reporting Flutter app, I ran into three UX problems in a row: The photo button only opened the gallery — no camera option Categories kept growing, making the grid scroll-heavy Switching to an emergency report target didn’t change the submit button color Here’s how I fixed each one. Problem 1: image_picker only opens the gallery The issue The photo button called pickImage(source: ImageSource.gallery) directly. Camera permissions were in place, but the UI never offered the option. ...

2026-03-09 · 5 min read · Seunghan

Flutter iOS TestFlight Upload Failure: objective_c.framework Simulator Slice Error

After building a Flutter app with flutter build ipa --release, TestFlight rejected the upload via altool. Here’s what happened, why it happened, and how I automated the fix with a reusable Makefile target. The Error UPLOAD FAILED with 3 errors Invalid executable. The "Runner.app/Frameworks/objective_c.framework/objective_c" executable references an unsupported platform in the x86_64 slice. Simulator platforms aren't permitted. Invalid executable. The "Runner.app/Frameworks/objective_c.framework/objective_c" executable references an unsupported platform in the arm64 slice. Simulator platforms aren't permitted. Unsupported Architectures. The executable for Runner.app/Frameworks/objective_c.framework contains unsupported architectures '[x86_64]'. The build succeeded and the IPA was generated without any issues — the rejection happened at upload time, not at build time. This distinction matters because it means the problem isn’t in your Xcode settings or your Flutter project configuration per se; it lives inside a third-party framework binary that Flutter embeds silently. ...

2026-03-09 · 8 min read · Seunghan
Uxui Review And Fix Svelte Rails

Rails + Svelte App UX/UI Full Review and Improvement Record

While running a web app built with Rails 8 + Inertia.js + Svelte 5, I noticed that even though the features were working correctly, the fine-grained UX felt inconsistent. This post is a record of a full audit and the four highest-priority issues I fixed. When you build features quickly, each screen tends to be developed independently, and you end up with situations where “the same feature works differently depending on where you are.” From the user’s perspective, this inconsistency makes the app feel unpolished. It is not a functional bug in the traditional sense, but it is absolutely a UX bug. ...

2026-03-06 · 11 min read · Seunghan
Svelte Inertia Design Tokens System

Establishing Design Token System Across 8 Svelte 5 + Inertia.js Projects

When you run multiple projects on a Rails + Inertia.js + Svelte 5 stack, one persistent problem tends to surface: each project ends up with its own inconsistent standards for colors, typography, and spacing. One project has everything neatly organized in tailwind.config.js, while another is littered with hardcoded values like bg-[#3182F6]. The problem compounds as the number of projects grows. Every new project means redefining colors from scratch, rebuilding button styles, and re-establishing font size conventions. Even when a component from one project is worth reusing in another, the differing design foundations make it impossible to drop it in as-is. ...

2026-03-03 · 13 min read · Seunghan
Storybook Reference Design Component System

Analyzing Reference Design to Extend Component System — Svelte 5 + Storybook 10

When you receive a reference app for a project that already has a reasonably mature design system, the temptation is to either copy it pixel-for-pixel or ignore it entirely. Neither option is good. Rewriting everything from scratch discards existing work; ignoring the reference breaks alignment with the designer. This post documents how I found the balance: absorbing the structural patterns from the reference while keeping the existing dark glassmorphism theme intact. ...

2026-02-27 · 12 min read · Seunghan
Render Multi Service Error Fix Deploy

Render 6 Service Error Bulk Fix — Stoplight, FK Constraints, Puma 7, Solid Stack Debugging

Six Rails services deployed on Render were all throwing different errors at the same time. Going through the logs one by one revealed both common patterns and service-specific issues. This post documents how all of them were fixed and deployed within a single session. Overview Instead of SSH-ing into each service individually, I used the Render API to pull logs from all six services at once via a local script. The results: ...

2026-02-24 · 13 min read · Seunghan
Rails8 Cross Project Patterns And Improvements

Rails 8 Cross-Project Pattern Application — rack-attack, PWA Banner, Sentry, FCM Multi-Device

When running two Rails 8 projects in parallel, patterns carefully built in one project often end up missing in the other. When implementing features, you naturally focus on the immediate requirements at hand — and it is easy to overlook a well-crafted solution from a sibling project that would save you significant time and headaches. This time I deliberately placed both projects side by side and did a systematic cross-pollination pass. The focus was on security hardening, progressive web app experience, error tracking, and push notification infrastructure — the kind of foundational plumbing that rarely makes it into sprint planning but matters enormously in production. ...

2026-02-20 · 13 min read · Seunghan
Privacy Policy Terms Disclaimer Contact