Daily micro-tips for C#, SQL, performance, and scalable backend engineering.
:focus shows outline on mouse clicks (annoying). :focus-visible shows only for keyboard navigation. Old Way (:focus): button:focus { outline: 2px solid blue; } /* Problem: Shows outline when clicked with mouse Users disable it: outline: none; (BAD for accessibility!) */ Better Way (:focus-visible): button:focus { outline: none; /* Remove default */ } button:focus-visible { outline: […]
Checking scroll position with events is inefficient. Intersection Observer detects when element enters viewport. Setup: const loadMoreTrigger = document.getElementById(‘load-more’); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { loadMoreData(); // Fetch next page } }); }); observer.observe(loadMoreTrigger); async function loadMoreData() { const response = await fetch(‘/api/posts?page=’ + currentPage); const data = […]
Loading spinners look outdated. Modern sites use skeleton screens that show content placeholders while data loads. Pure CSS, no libraries needed. The Basic Skeleton: .skeleton { background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } @keyframes loading { 0% { background-position: 200% 0; } […]
Page navigation feels jarring? The new CSS View Transitions API creates native app-like transitions without a single line of JavaScript. The Basic Setup: /* Enable view transitions for all navigations */ @view-transition { navigation: auto; } /* Customize the transition */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: ease-in-out; } /* Fade effect */ ::view-transition-old(root) { […]