Auto-Hiding Scrollbars with OverlayScrollbars
Native scrollbars break dark UI designs and can't auto-hide on desktop. OverlayScrollbars replaces them with customizable overlay scrollbars. In LiveView, use a hook to handle DOM updates.
Building Filter UI in LiveView
Client-side filtering in LiveView - load all data on mount, store in assigns, filter with Enum.filter on events. No database round-trips, instant feedback.
Content-Driven Phoenix Sites with SQLite
Store portfolio/blog content in YAML files, import into SQLite with a Mix task. Query with Ecto, filter with Flop. Single-user sites don't need PostgreSQL.
CSS Grid Alignment with minmax
Use minmax(280px, 380px) for constrained card widths. Add justify-content start to left-align. Match container margin to other page elements.
Customizing MDEx Output with AST Transformation
MDEx's default HTML output won't match your site's design system. Use traverse_and_update to transform the AST before rendering - add custom classes, skip elements, or replace nodes entirely.
DaisyUI Theming with OKLCH Colors
DaisyUI v5 uses OKLCH color space for themes. Override --color-* variables in CSS. OKLCH gives perceptually uniform colors - same lightness value means same perceived brightness.
Hierarchical Dependency Injection in AngularJS
AngularJS DI is flat - services are global singletons. Convert services to directives with require property for DOM-tree based hierarchical injection.
Phoenix HTML Escaping in Dynamic Content
When building HTML strings manually in Phoenix, use html_escape then safe_to_string. Prevents XSS from user content.
Surviving LiveView DOM Patches with JS Hooks
Third-party JS libraries that create DOM elements get destroyed by LiveView patches. Use hooks with mounted, updated, and destroyed callbacks to detect and reinitialize.
Template Transclusion in AngularJS
Standard ng-transclude can't pass parent data to transcluded content. Custom cr-transclude directive solves this by extending the transclude scope with context data.