ux

The five latest posts were trapped in a swipe-one-by-one carousel. For navigation content, a plain vertical list is the honest pattern.

TL;DR: The author shipped a carousel for their latest blog posts, then found it tedious to use themselves. The realization: carousels suit fixed showcases like services, but blog lists are navigation, which needs everything scannable at once. They swapped it for a plain vertical list of five titles with dates, no JS or gestures.

Five service cards stacked on a phone became an endless scroll. A script-free carousel with CSS scroll snap turned out to be the honest middle ground.

TL;DR: The author turned five stacked mobile service cards into a pure CSS carousel using scroll snap, no JavaScript needed. Unlike typical carousels, it skips auto-rotation and shows an 80vw peek of the next card, so users know there's more. Desktop keeps the grid layout via a media query.

My portfolio had a bare list of projects. I added five capability cards: the CSS grid was solved in twenty minutes. The copy took three rewrites.

TL;DR: The CSS grid for his portfolio's service cards was the easy part, done in 20 minutes with MDN's auto-fill recipe. The hard part was the copy, which took three rewrites to compress into short, blunt descriptions that never truncate. His take: layout is a solved problem, so spend the effort on content, equal heights, and a consistent shadow.

Adding wheel paging to my AI answers popup: a listener that never attached, passive-by-default events, edge detection, and reduced motion.

TL;DR: Building wheel-based answer navigation in a React popup hit two traps: the useEffect ran before the dialog content existed, so the listener attached to a null ref, and wheel listeners default to passive in most browsers, silently neutering preventDefault. Fixing both required dependency-aware attachment and an explicit non-passive listener. Scroll-edge detection plus prefers-reduced-motion CSS handles the rest.

The source list and the chat fought over one overlay. Two panels with different z-index plus render-time visibility ended the fight.