CSS

I was adding two features to the dashboard of a sports tournament management app: DnD card reordering — drag cards to rearrange sections (My Matches / Bracket / Match List) Card collapse/expand — fold away sections you don’t need Each sounds simple, but add Turbo Frame lazy loading and a requirement that layout state survives page reloads, and there’s more to think about than it first appears. 1. Choosing a DnD Library My first attempt used the native HTML5 Drag & Drop API directly — dragstart, dragover, drop. It works fine on desktop, but the problem is touch devices. The HTML5 drag API has incomplete support on iOS Safari; touch-dragging simply doesn’t work there. ...

I built a calendar printing feature for the web. PDF and PNG downloads worked perfectly, but when hitting the browser print button, image positions weren’t reflected at all. Same data, so why different results? Structure: Preview and Hidden Export Target The calendar print page had this structure: +-- Visible Area ----------------------------+ | [Settings Panel] [Preview Area] | | - Date range Calendar preview | | - Theme/Color | | - Image position slider | +--------------------------------------------+ +-- Hidden Export Target --------------------+ | <div class="fixed -left-[9999px]"> | <- off-screen | <PrintableCalendar ... /> | | </div> | +--------------------------------------------+ The preview is a scaled-down thumbnail, while the actual export calendar is rendered at full size off-screen (-left-[9999px]). PDF/PNG capture this hidden element. ...