The difference between a 'good' UI and a 'delightful' one is often invisible until you move your mouse. 🖱️✨ I've shared my favourite CSS patterns for building high-performance micro-interactions that don't break accessibility. Check it out here: alexanderburgos.netlify.app/blog/micro-int…

Tailwind CSS has won the framework war, but have we lost something vital in the process? 🎨 I’ve been thinking about how utility-first workflows might be eroding our core CSS skills. Are we becoming decorators instead of engineers? Read more: alexanderburgos.netlify.app/blog/tailwind-…

Bento grids are everywhere right now, but making them truly responsive? That's where it gets tricky. 🍱 I've put together a code-heavy guide on mastering Apple's signature layout using modern CSS Grid. Stop fighting your columns and read this: alexanderburgos.netlify.app/blog/bento-gri…

Struggling to keep your UI consistent as your app grows? 😫 I've found that Design Tokens are the secret sauce. I’ve put together a practical guide on building a scalable system using just CSS variables. No over-engineering, just clean code. alexanderburgos.netlify.app/blog/design-to…

I've been waiting years for this. Real conditional logic in CSS—not hacks, actual if() statements. Chrome 137 just changed the game for how we write stylesheets. Here's why this matters 👇 alexanderburgos.netlify.app/blog/css-logic…

Ever landed on a website and felt your brain freeze? That's cognitive load hitting its ceiling. I've been exploring why some interfaces feel effortless whilst others feel like solving a puzzle. The difference? Understanding mental limits. alexanderburgos.netlify.app/blog/cognitive…

Ever wonder why cluttered dashboards feel overwhelming? It's Miller's Law—our brains can only juggle ~7 chunks of info at once. The secret isn't limiting elements, it's smart chunking. alexanderburgos.netlify.app/blog/millers-l…

Spent too many hours wrestling with clip-paths for squircles? Same here. The experimental CSS corner-shape property is changing the game - notches, scoops, and Apple-like curves with simple keywords. No more complex SVGs. Just clean CSS. Full guide: alexanderburgos.netlify.app/blog/css-corne…

I've loaded entire JS libraries just to position a tooltip. Ridiculous, right? CSS Anchor Positioning changes everything. Native browser positioning, zero JavaScript, proper performance. Here's how I'm building tooltips now 👇 alexanderburgos.netlify.app/blog/css-ancho…

Tired of components breaking when moved to different layouts? 🤔 I've been exploring CSS Container Queries and honestly, they're brilliant for building truly modular components. They respond to their parent, not the viewport. Game changer. alexanderburgos.netlify.app/blog/responsiv…

I've wasted too many hours manually copying design tokens from Figma to code. Found a way to automate the entire thing - now changes go straight to GitHub as PRs. No more typos, no more manual copying. Game changer. 🎯 alexanderburgos.netlify.app/blog/how-to-ex…

I've been using CSS :has() to replace JavaScript state logic, but here's the thing: it can tank performance if you're not careful. Deep nesting = expensive recalculations. Here's how to keep your apps snappy while using the parent selector 👇 alexanderburgos.netlify.app/blog/css-has-p…

HSL is broken. Yellow at 50% lightness? Neon. Blue at 50%? Dark abyss. OKLCH fixes this with perceptual uniformity, wide gamut colors, and relative syntax that'll change how you build design systems. Here's what I've learned 👇 alexanderburgos.netlify.app/blog/css-oklch…

Found a CSS property that feels like a cheat code for performance 🚀 content-visibility: auto tells the browser to skip rendering off-screen elements. Saw massive CPU savings on content-heavy pages. alexanderburgos.netlify.app/blog/css-conte…

Ever notice how that one red button on a grey page sticks in your memory? That's the Von Restorff Effect at work. I've been exploring how to use this psychology principle to guide users exactly where they need to go—without them even realising it. alexanderburgos.netlify.app/blog/von-resto…

Stop adding !important tags everywhere just to override third-party CSS. I've been using CSS Cascade Layers (Layer) to control specificity without the mess. Layer order beats selector complexity. Game changer for design systems 👇 alexanderburgos.netlify.app/blog/css-casca…

Ever wonder why screen reader users struggle with data tables? Here's the thing: most devs focus on styling and forget semantic HTML. I've written about scope attributes, captions, and the mistakes that break accessibility. Let's fix this. alexanderburgos.netlify.app/blog/accessibl…

Hot take: styled-components solved problems that CSS now handles natively. :has(), container queries, and typed attr() changed everything. I broke down why runtime CSS-in-JS is becoming obsolete 👇 alexanderburgos.netlify.app/blog/what-kill…

I've been testing native CSS nesting, and honestly? It's brilliant. Works in all major browsers now, no build step needed. Though there's one gotcha that'll catch BEM fans off guard... Full breakdown 👇 alexanderburgos.netlify.app/blog/native-cs…

Finally! Native page transitions without wrestling with complex libraries or 50kb JS bundles. The View Transitions API lets you create seamless morphing animations with pure CSS and vanilla JavaScript. Here's how I'm using it in production 👇 alexanderburgos.netlify.app/blog/view-tran…