1<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <link rel="stylesheet" type="text/css" href="/assets/static/src_styles_globals-8da7f7cb.-VBHtTGy.css"> 5 <meta charset="UTF-8" /> 6 7 8 <title>Sizzy Blog - Web Development and Responsive Testing Guides</title><meta property="og:title" content="Sizzy Blog - Web Development and Responsive Testing Guides" /> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <link rel="canonical" href="https://sizzy.co/blog"/><meta name="description" content="Practical guides to responsive CSS, browser debugging, multi-device testing, and developer workflows, with examples and checklists from Sizzy."/><meta name="robots" content="index, follow, max-image-preview:large"/><meta property="og:type" content="website"/><meta property="og:url" content="https://sizzy.co/blog"/><meta property="og:title" content="Sizzy Blog - Web Development and Responsive Testing Guides"/><meta property="og:description" content="Practical guides to responsive CSS, browser debugging, multi-device testing, and developer workflows, with examples and checklists from Sizzy."/><meta property="og:site_name" content="Sizzy"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://sizzy.co/meta/og.png"/><meta property="og:image:secure_url" content="https://sizzy.co/meta/og.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Sizzy - The Browser for Web Developers"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@thekitze"/><meta name="twitter:creator" content="@thekitze"/><meta name="twitter:title" content="Sizzy Blog - Web Development and Responsive Testing Guides"/><meta name="twitter:description" content="Practical guides to responsive CSS, browser debugging, multi-device testing, and developer workflows, with examples and checklists from Sizzy."/><meta name="twitter:image" content="https://sizzy.co/meta/og.png"/><meta name="twitter:image:alt" content="Sizzy - The Browser for Web Developers"/><link rel="preconnect" href="https://posthog.server.kitze.io"/><link rel="preload" href="/fonts/Geist-Variable.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png"/><link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png"/><link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="manifest" href="/site.webmanifest"/><meta name="apple-mobile-web-app-title" content="Sizzy"/><meta name="theme-color" content="#09090b"/><meta name="color-scheme" content="dark"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
10<script type="application/ld+json">{"@context":"https://schema.org","@type":"CollectionPage","@id":"https://sizzy.co/blog","url":"https://sizzy.co/blog","name":"Sizzy Blog - Web Development and Responsive Testing Guides","description":"Practical guides to responsive CSS, browser debugging, multi-device testing, and developer workflows, with examples and checklists from Sizzy.","inLanguage":"en"}</script>
10<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Sizzy","item":"https://sizzy.co/"},{"@type":"ListItem","position":2,"name":"Sizzy Blog - Web Development and Responsive Testing Guides","item":"https://sizzy.co/blog"}]}</script>
10 11 12 13 14 15 16 </head> 17 <body> 18 19 <div id="root"><link rel="preload" as="image" href="https://www.kitze.io/avatar.jpg"/><main class="bg-ink min-h-screen text-white"><header class="sticky top-0 z-50 transition-[background-color,border-color,backdrop-filter] duration-200 border-b border-transparent bg-transparent"><a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-3 focus:z-[60] focus:rounded-md focus:bg-white focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-black">Skip to content</a><nav aria-label="Primary" class="mx-auto flex h-16 w-full max-w-6xl items-center gap-6 px-5 sm:px-8"><a href="/" aria-label="Sizzy home" class="inline-flex items-center gap-2.5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="h-8 w-8"><rect x="1" y="1" width="30" height="30" rx="8" fill="#141417" stroke="rgba(255,255,255,0.14)"></rect><rect x="6.5" y="8" width="19" height="12" rx="2" fill="none" stroke="rgba(255,255,255,0.78)" stroke-width="1.5"></rect><rect x="11" y="12" width="12" height="12" rx="2" fill="#141417" stroke="rgba(255,255,255,0.78)" stroke-width="1.5"></rect><rect x="15.5" y="16" width="7" height="10" rx="1.5" fill="#141417" stroke="#ff6a3d" stroke-width="1.5"></rect></svg><span class="text-[17px] font-semibold tracking-tight text-white">Sizzy</span></a><ul class="ml-2 hidden items-center gap-1 lg:flex"><li><a href="/#workspace" class="rounded-md px-3 py-2 text-sm text-zinc-400 transition-colors hover:text-white">Workspace</a></li><li><a href="/#devices" class="rounded-md px-3 py-2 text-sm text-zinc-400 transition-colors hover:text-white">Devices</a></li><li><a href="/#debugging" class="rounded-md px-3 py-2 text-sm text-zinc-400 transition-colors hover:text-white">Debugging</a></li><li><a href="/#agents" class="rounded-md px-3 py-2 text-sm text-zinc-400 transition-colors hover:text-white">Agents</a></li><li><a href="/#pricing" class="rounded-md px-3 py-2 text-sm text-zinc-400 transition-colors hover:text-white">Pricing</a></li><li><a href="/blog" class="rounded-md px-3 py-2 text-sm text-zinc-400 transition-colors hover:text-white">Blog</a></li></ul><div class="ml-auto hidden items-center gap-2 lg:flex"><a class="inline-flex items-center justify-center gap-2 rounded-full font-medium whitespace-nowrap transition-[background-color,color,border-color,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-ink active:translate-y-px text-zinc-300 hover:text-white h-9 px-4 text-sm" href="https://portal.sizzy.co/login">Sign in</a><a class="inline-flex items-center justify-center gap-2 rounded-full font-medium whitespace-nowrap transition-[background-color,color,border-color,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-ink active:translate-y-px bg-white text-black hover:bg-zinc-200 h-9 px-4 text-sm" href="https://portal.sizzy.co/signup" data-sizzy-placement="header">Start free trial</a></div><button type="button" class="ml-auto grid h-10 w-10 place-items-center rounded-md border border-white/10 text-zinc-200 lg:hidden" aria-expanded="false" aria-controls="_R_al_" aria-label="Open menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu h-5 w-5" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button></nav><div id="_R_al_" hidden="" class="border-t border-white/[0.08] px-5 pb-5 pt-3 lg:hidden"><ul class="flex flex-col"><li><a href="/#workspace" class="block rounded-md px-2 py-2.5 text-[15px] text-zinc-200 hover:bg-white/[0.05]">Workspace</a></li><li><a href="/#devices" class="block rounded-md px-2 py-2.5 text-[15px] text-zinc-200 hover:bg-white/[0.05]">Devices</a></li><li><a href="/#debugging" class="block rounded-md px-2 py-2.5 text-[15px] text-zinc-200 hover:bg-white/[0.05]">Debugging</a></li><li><a href="/#agents" class="block rounded-md px-2 py-2.5 text-[15px] text-zinc-200 hover:bg-white/[0.05]">Agents</a></li><li><a href="/#pricing" class="block rounded-md px-2 py-2.5 text-[15px] text-zinc-200 hover:bg-white/[0.05]">Pricing</a></li><li><a href="/blog" class="block rounded-md px-2 py-2.5 text-[15px] text-zinc-200 hover:bg-white/[0.05]">Blog</a></li></ul><div class="mt-3 flex flex-col gap-2"><a class="inline-flex items-center justify-center gap-2 rounded-full font-medium whitespace-nowrap transition-[background-color,color,border-color,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-ink active:translate-y-
19px bg-white text-black hover:bg-zinc-200 h-11 px-5 text-sm" href="https://portal.sizzy.co/signup" data-sizzy-placement="header">Start free trial</a><a class="inline-flex items-center justify-center gap-2 rounded-full font-medium whitespace-nowrap transition-[background-color,color,border-color,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-ink active:translate-y-px border border-white/12 bg-white/[0.04] text-white hover:border-white/25 hover:bg-white/[0.08] h-11 px-5 text-sm" href="https://portal.sizzy.co/login">Sign in</a></div></div></header><section id="main" tabindex="-1" class="px-6 pt-12 pb-24 md:px-12 lg:px-20"><div class="mx-auto max-w-5xl"><a href="/" class="mb-8 inline-block text-sm font-medium text-zinc-500 transition-colors hover:text-white">â sizzy.co</a><div class="max-w-3xl"><div class="mb-5 inline-flex rounded-full border border-white/10 bg-white/[0.03] px-4 py-1.5 text-sm text-zinc-400">Sizzy Blog</div><h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Build, debug, test.<br/><span class="text-zinc-500">Keep learning.</span></h1><p class="mt-6 text-lg leading-8 text-zinc-400">Practical guides to responsive CSS, browser debugging, multi-device testing, and the workflows that connect them.</p></div><div class="mt-16 grid gap-4 md:grid-cols-2"><a href="/blog/css-viewport-units" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive CSS</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">CSS Viewport Units: 100vh, 100dvh, svh, and lvh</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Learn what 1vh and 100dvh mean, compare small and dynamic viewport heights, and use copyable CSS patterns for mobile heroes and scrollable app layouts.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/browserstack-alternatives" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Cross-browser</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">BrowserStack Alternatives for Responsive and Browser Testing</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Choose a BrowserStack alternative for your task: local responsive testing, browser automation, or real-device QA. See where Sizzy fits and where it does not.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/css-multiple-transforms" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS reference</span><span>5 min read</span></div><h2 class="text-xl font-semibold text-white">How to Combine Multiple CSS Transforms</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Combine CSS translate, rotate, and scale without overwriting a transform. Copy working examples and see exactly how transform order changes the result.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a>
19<a href="/blog/what-is-offsetparent" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">JavaScript reference</span><span>5 min read</span></div><h2 class="text-xl font-semibold text-white">offsetParent in JavaScript: Examples and Null Cases</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Understand element.offsetParent, why it can be null, and when to use offsetTop or getBoundingClientRect. Includes a working positioned-container example.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsinator-alternatives" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Comparison</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Responsinator Alternatives for Responsive Testing</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Compare Responsinator, DevTools, and Sizzy for responsive testing. Learn why iframe previews fail, how to check localhost, and when you need real devices.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/css-3d-transforms" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS reference</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">CSS 3D Transforms: rotateX, rotateY, and perspective</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A practical guide to CSS 3D transforms - how perspective, rotateX, rotateY, and translateZ work together, plus the gotchas that flatten your 3D effect.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/enable-experimental-web-platform-features" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Dev workflow</span><span>5 min read</span></div><h2 class="text-xl font-semibold text-white">How to Enable Experimental Web Platform Features in Chrome</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to turn on Chrome's experimental web platform features flag to test upcoming CSS and JavaScript APIs - and why you should never rely on it in production.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-viewer-chrome-extension" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive QA</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Responsive Viewer Chrome Extension: Setup, Tips, and Limits</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to use a Responsive Viewer Chrome extension to preview multiple device sizes at once, where it shines, and the limitations that push teams to a dedicated dev browser.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/how-to-find-website-breakpoints" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive QA</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Find the Breakpoints of Any Website</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Three reliable ways to find a website's responsive breakpoints - reading the CSS media queries, watching the layout change, and using device tooling to confirm.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-web-design-tools" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Dev workflow</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Responsive Web Design Tools: The Practical 2026 List</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">The responsive web design tools that actually earn a place in your workflow - for previewing breakpoints, debugging layout, capturing screenshots, and testing on real devices.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/fix-horizontal-scroll" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS debugging</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Find and Remove the Horizontal Scroll Bar</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A step-by-step method to track down the element causing an unwanted horizontal scroll bar on mobile and remove it without breaking other layouts.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/inspect-element-on-mobile" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">DevTools deep dive</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Inspect Element on Mobile</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to open real DevTools for a page running on a phone using remote debugging on Android and iOS, plus faster local alternatives.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/how-to-inspect-element-on-iphone" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Mobile debugging</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">How to Inspect Element on iPhone</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Three reliable ways to inspect element on a real iPhone - Safari Web Inspector over USB, remote debugging without a Mac, and a faster local workflow.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/css-not-selector" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS reference</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">The CSS :not() Selector: A Complete Guide</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How the CSS :not() selector works, why it has zero specificity rules of its own, and practical patterns for excluding elements without extra classes.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/css-position-sticky" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS reference</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">
19CSS position: sticky, Explained</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How CSS position: sticky actually works, the threshold offsets that control it, and the layout rules every sticky element depends on.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/position-sticky-not-working" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS debugging</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Why position: sticky Is Not Working (and How to Fix It)</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A checklist of the real reasons CSS position: sticky stops working - missing offsets, overflow on ancestors, short parents - and how to fix each one.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/graceful-degradation-vs-progressive-enhancement" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Web strategy</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Graceful Degradation vs Progressive Enhancement</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">What graceful degradation means, how it differs from progressive enhancement, and how to decide which strategy fits your project and audience.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/adaptive-vs-responsive-design" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive design</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Adaptive Design vs Responsive Design</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">What adaptive design is, how it differs from responsive design, and when fixed-width breakpoints beat a fluid layout (and vice versa).</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/css-textarea" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS reference</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Styling a CSS Textarea (resize, rows, and autosize)</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to style a textarea with CSS - control resizing, set sizing with rows and CSS, fix common quirks, and build a clean autosizing field.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/css-has-selector" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS reference</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">The CSS :has() Selector Explained</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How the CSS :has() selector lets you style a parent based on its children - the long-awaited parent selector - with practical, real-world patterns.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/best-browser-for-developers" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Dev workflow</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">The Best Browser for Web Developers in 2026</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A practical comparison of the best browsers for web development - from Chrome and Firefox DevTools to dedicated dev browsers built for multi-device work.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/fluid-web-design" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive design</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Fluid Web Design: A Practical Guide</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">What fluid web design is, how it differs from fixed and adaptive layouts, and how to build fluid type and spacing with clamp() and viewport units.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a>
19<a href="/blog/transparent-gradient-css" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS reference</span><span>5 min read</span></div><h2 class="text-xl font-semibold text-white">CSS Transparent Gradients and Fades</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to create transparent gradients in CSS, fade an element or image to transparent, and avoid the gray transparent-black gradient bug.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/css-breakpoints-guide" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive CSS</span><span>8 min read</span></div><h2 class="text-xl font-semibold text-white">CSS Breakpoints: A Complete Guide</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to choose, name, and test CSS breakpoints based on content instead of devices - with a practical workflow for verifying every transition.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/mobile-first-vs-desktop-first" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive CSS</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Mobile-First vs Desktop-First CSS</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">The practical difference between mobile-first and desktop-first responsive CSS, when each makes sense, and how to test both approaches.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/container-queries-vs-media-queries" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive CSS</span><span>8 min read</span></div><h2 class="text-xl font-semibold text-white">Container Queries vs Media Queries</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">When to reach for CSS container queries instead of media queries, how they differ, and how to test c
19omponent-level responsiveness reliably.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/common-screen-resolutions" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Viewport reference</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Most Common Screen Resolutions for Web Design</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">The screen resolutions and CSS viewport widths that actually matter in 2026, and how to turn them into a focused responsive test matrix.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/min-width-vs-max-width-media-queries" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive CSS</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">min-width vs max-width in Media Queries</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How min-width and max-width media queries behave differently, which to choose, and how to avoid the overlap bugs that break layouts.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/tailwind-responsive-breakpoints" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS frameworks</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Tailwind CSS Responsive Breakpoints Explained</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How Tailwind's responsive prefixes and default breakpoints work, how to customize them, and how to test utility-driven responsive UI fast.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/bootstrap-breakpoints" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS frameworks</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Bootstrap 5 Breakpoints and Grid</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Bootstrap 5'
19s breakpoint tiers, container behavior, and responsive grid classes - plus a fast way to test Bootstrap layouts on every device.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/viewport-meta-tag" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Mobile fundamentals</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">The Viewport Meta Tag Explained</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">What the viewport meta tag does, why width=device-width matters, and the common mistakes that break responsive layouts on mobile.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/safe-area-insets" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Mobile fundamentals</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Designing for the Notch: Safe Area Insets</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to use env(safe-area-inset-*) and viewport-fit=cover so your layout respects notches, rounded corners, and the home indicator.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/device-pixel-ratio" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Viewport reference</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Device Pixel Ratio and Retina Testing</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">What device pixel ratio is, how it affects image sharpness, and how to test that your assets look crisp on high-density screens.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/cross-browser-testing-guide" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Cross-browser</span><span>8 min read</span></div><h2 class="text-xl font-semibold text-white">Cross-Browser Testing: A Practical Guide</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A realistic cross-browser testing workflow for small teams - which browsers to prioritize, what actually breaks, and how to test efficiently.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-safari-on-windows" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Cross-browser</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Test Safari on Windows</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Practical ways to test Safari and WebKit behavior from a Windows machine, since Apple no longer ships Safari for Windows.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/real-devices-vs-emulators" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Cross-browser</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Real Devices vs Emulators for Web Testing</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">When emulated viewports are enough and when you genuinely need a real phone - a pragmatic split that keeps testing fast without missing bugs.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-website-on-ipad" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Device testing</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Test Your Website on iPad</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">iPad viewport sizes, the tablet layout gap most sites miss, and a fast workflow for testing iPad portrait and landscape properly.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-website-on-android" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Device testing</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">How to Test a Website on an Android Phone</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">
19How to open your site on a real Android phone, use remote debugging over USB, and cover Android's wide range of viewport widths.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-on-iphone-without-iphone" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Device testing</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Test on iPhone Without an iPhone</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Practical ways to test iPhone and mobile Safari behavior when you don't own an iPhone, and what emulation can and can't reproduce.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/foldable-device-testing" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Device testing</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Testing Websites on Foldable Devices</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How foldables change responsive assumptions, the viewport widths they introduce, and how to keep layouts working across the fold.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-localhost-on-mobile" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Dev workflow</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Test Localhost on Your Phone</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Three reliable ways to open your local dev server on a real phone, plus the network gotchas that stop localhost from loading on mobile.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/hot-reload-across-devices" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Dev workflow</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Hot Reload Across Multiple Devices</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to get instant hot reload on every device at once so a single code change updates ph
19one, tablet, and desktop without manual refreshes.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/access-local-dev-server-from-any-device" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Dev workflow</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Access Your Local Dev Server From Any Device</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Network setup, binding, and HTTPS tips for reaching your local dev server from phones, tablets, and other machines on your network.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/expose-localhost-to-mobile" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Dev workflow</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Expose Localhost to Mobile: Tunnels vs Local IP</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">When to use a local IP versus a tunneling tool like ngrok or cloudflared to open your local site on mobile, and the trade-offs of each.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/debug-css-layout-issues" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS debugging</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">How to Debug CSS Layout Issues</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A systematic approach to debugging CSS layout bugs - isolating the cause, using DevTools overlays, and verifying the fix across breakpoints.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/debug-flexbox-layouts" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS debugging</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Debugging Flexbox Layouts</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">The flexbox gotchas that cause most layout bugs - min-width: auto, flex-shrink, and alignment - and how to debug them with DevTools.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/debug-css-grid" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS debugging</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Debugging CSS Grid Layouts</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to debug CSS Grid using the DevTools grid inspector, fix implicit-track surprises, and build grids that reflow cleanly on mobile.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/why-layout-breaks-on-mobile" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS debugging</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Why Your Layout Breaks on Mobile</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">The most common reasons a desktop layout falls apart on phones - and a checklist to catch each one before it ships.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/core-web-vitals-guide" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Performance</span><span>8 min read</span></div><h2 class="text-xl font-semibold text-white">Core Web Vitals Explained for Developers</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">What LCP, INP, and CLS measure, the thresholds Google uses, and a practical workflow for finding and fixing each on real pages.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/fix-cumulative-layout-shift" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Performance</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">How to Fix Cumulative Layout Shift (CLS)</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">The common causes of layout shift - unsized media, injected content, and web fonts - and concrete fixes to get CLS under 0.1.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/improve-largest-contentful-paint" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Performance</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">How to Improve Largest Contentful Paint (LCP)</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">What drives LCP, how to find your LCP element, and the highest-impact fixes for getting it under 2.5 seconds on mobile.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/mobile-performance-testing" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Performance</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Mobile Performance Testing Workflow</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A repeatable workflow for testing mobile web performance with throttling, real device checks, and a focus on the metrics that matter.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/chrome-devtools-tips" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">DevTools deep dive</span><span>8 min read</span></div><h2 class="text-xl font-semibold text-white">Chrome DevTools Tips for Frontend Developers</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Lesser-known Chrome DevTools features that speed up frontend debugging - from the command menu to local overrides and CSS overlays.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/firefox-responsive-design-mode" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">DevTools deep dive</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Firefox Responsive Design Mode Guide</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to use Firefox's Responsive Design Mode for viewport testing, touch simulation, and throttling - and where it differs from Chrome.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/network-throttling-testing" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">DevTools deep dive</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Testing With Network Throttling</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Why network throttling matters, which profiles to use, and how to test loading states, spinners, and slow-network UX realistically.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/accessibility-testing-guide" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Accessibility</span><span>8 min read</span></div><h2 class="text-xl font-semibold text-white">Web Accessibility Testing: A Developer's Guide</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A practical accessibility testing workflow combining automated checks, keyboard testing, and screen readers to catch
19real WCAG issues.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-color-contrast" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Accessibility</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Test Color Contrast (WCAG)</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">WCAG contrast ratios explained, the common failures designers miss, and how to test contrast across real UI states and backgrounds.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/keyboard-navigation-testing" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Accessibility</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Testing Keyboard Navigation</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to test keyboard accessibility - focus order, visible focus, focus traps, and skip links - so every user can operate your site.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/screen-reader-testing" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Accessibility</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Testing With a Screen Reader</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A beginner-friendly guide to testing your site with VoiceOver and NVDA - what to listen for and the markup that makes pages announce well.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-screenshot-workflow" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Screenshots</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">A Responsive Screenshot Workflow</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to capture consistent screenshots across every breakpoint for reviews, QA evidence, and bug reports - without resizing windows by hand.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/design-to-dev-handoff" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Workflow</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Design-to-Dev Handoff Best Practices</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to make design-to-development handoff smooth - shared breakpoints, documented states, and a fast way to verify the build matches the design.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/device-framed-screenshots" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Screenshots</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Creating Device-Framed Marketing Screenshots</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to produce clean device-framed screenshots for landing pages, app stores, and social posts without a separate design tool.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/full-page-screenshot" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Screenshots</span><span>5 min read</span></div><h2 class="text-xl font-semibold text-white">How to Take a Full-Page Screenshot</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Ways to capture an entire scrolling page as one image - built-in browser commands, DevTools, and multi-device capture for responsive QA.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-multiple-accounts-simultaneously" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Sessions</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Test Multiple User Accounts at Once</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to test multi-user features - chat, permissions, collaboration - side by side using isolated browser sessions instead of incognito juggling.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-logged-in-logged-out-states" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Sessions</span><span>5 min read</span></div><h2 class="text-xl font-semibold text-white">Testing Logged-In and Logged-Out States</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to test authenticated and unauthenticated views side by side so you catch the bugs that only appear in one state.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-images-srcset" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive patterns</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">Responsive Images: srcset and sizes</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How srcset and the sizes attribute work together to serve the right image per device, save bandwidth, and keep visuals sharp.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-typography-clamp" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive patterns</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Responsive Typography with clamp()</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">How to build fluid, responsive type with CSS clamp() so text scales smoothly between breakpoints without a pile of media queries.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-tables" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive patterns</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Make Responsive Tables</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Practical patterns for making data tables work on small screens - horizontal scroll, stacked rows, and priority columns - with their trade-offs.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/css-framework-responsive-comparison" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS frameworks</span><span>8 min read</span></div><h2 class="text-xl font-semibold text-white">Responsive Patterns in Tailwind, Bootstrap, and Bulma</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">An honest comparison of how Tailwind, Bootstrap, and Bulma handle responsive design, and how to choose based on your team and workflow.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/browser-for-web-developers" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Dev workflow</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">What Is a Browser for Web Developers?</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Why developers are switching from Chrome to dedicated development browsers, what a dev browser actually does, and when it's worth it.
19</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/test-responsive-design-on-multiple-devices" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive QA</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">How to Test Responsive Design on Multiple Devices at Once</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A practical workflow for testing responsive layouts on every device simultaneously - without buying hardware or juggling browser windows.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/polypane-vs-sizzy-vs-responsively" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Comparison</span><span>8 min read</span></div><h2 class="text-xl font-semibold text-white">Polypane vs Sizzy vs Responsively: An Honest Comparison</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A straight comparison of the three main multi-device development browsers - strengths, weaknesses, and which one fits your workflow.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/chrome-devtools-device-mode-limitations" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">DevTools deep dive</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Chrome DevTools Device Mode: 7 Limitations to Know</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Chrome's device mode is useful but not the full story. Here's where its emulation differs from reality and how to close the gaps.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/debugging-media-queries" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">CSS debugging</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">How to Debug Media Queries Faster</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A systematic workflow for finding and fixing media query bugs - from locating the breaking width to verifying the fix on every breakpoint.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/testing-pwas-across-devices" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">PWA testing</span><span>7 min read</span></div><h2 class="text-xl font-semibold text-white">How to Test PWAs Across Devices</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Progressive web apps fail in device-specific ways. A workflow for testing installability, offline behavior, and viewport handling across devices.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-viewport-sizes" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Responsive QA</span><span>5 min read</span></div><h2 class="text-xl font-semibold text-white">Responsive Viewport Sizes</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A practical viewport size reference for testing mobile, tablet, and desktop layouts before release.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-visual-regression-checklist" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Visual regression</span><span>6 min read</span></div><h2 class="text-xl font-semibold text-white">Responsive Visual Regression Checklist</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A release checklist for comparing responsive screenshots and catching layout regressions across breakpoints.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/iphone-viewport-sizes" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Mobile viewport reference</span><span>4 min read</span></div><h2 class="text-xl font-semibold text-white">iPhone Viewport Sizes</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Common iPhone CSS viewport widths and a practical way to choose iPhone test sizes for responsive QA.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/android-viewport-sizes" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Android viewport reference</span><span>4 min read</span></div><h2 class="text-xl font-semibold text-white">Android Viewport Sizes</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">Common Android viewport widths and QA notes for testing responsive layouts across varied mobile devices.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a href="/blog/responsive-breakpoint-checklist" class="group flex flex-col rounded-2xl border border-white/[0.08] bg-[#111] p-6 transition-colors hover:border-white/20 hover:bg-white/[0.03]"><div class="mb-4 flex items-center gap-3 text-xs text-zinc-500"><span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-0.5">Breakpoint QA</span><span>5 min read</span></div><h2 class="text-xl font-semibold text-white">Responsive Breakpoint Checklist</h2><p class="mt-3 flex-1 text-sm leading-relaxed text-zinc-500">A practical checklist for auditing CSS breakpoints and validating layout transitions before shipping.</p><div class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-zinc-400 transition-colors group-hover:text-white">Read article<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a></div><div class="mt-20 rounded-2xl border border-white/[0.08] bg-[#111] p-8 text-center md:p-12"><h2 class="text-2xl font-bold text-white md:text-3xl">Bring the workflow into one window.</h2><p class="mx-auto mt-3 max-w-xl text-zinc-500">Explore how projects, devices, isolated sessions, debugging, capture, terminals, and coding agents fit together in Sizzy.</p><a href="/features" class="mt-6 inline-flex items-center gap-2 rounded-full bg-white px-8 py-3 font-medium text-black transition-all hover:bg-zinc-200">Explore the developer workspace<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div></div></section><section class="bg-black py-24 md:py-32 border-t border-white/5"><div class="container mx-auto px-6 md:px-12 lg:px-20"><div class="flex items-center gap-6 mb-16"><img src="https://www.kitze.io/avatar.jpg" alt="Kitze" class="w-20 h-20 rounded-full border border-white/10"/><div><div class="text-xs font-medium text-zinc-500 uppercase tracking-widest mb-1">From the maker</div><a href="https://kitze.io" target="_blank" rel="noopener noreferrer" class="hover:opacity-80 transition-opacity"><h2 class="text-3xl font-bold text-white tracking-tight mb-3">More by Kitze</h2></a><div class="flex items-center gap-1"><a href="https://x.com/thekitze" target="_blank" rel="noopener noreferrer" class="p-1.5 text-zinc-500 hover:text-white hover:bg-white/5 rounded-lg transition-all cursor-pointer" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter w-4 h-4" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a><a href="https://github.com/kitze" target="_blank" rel="noopener noreferrer" class="p-1.5 text-zinc-500 hover:text-white hover:bg-white/5 rounded-lg transition-all cursor-pointer" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github w-4 h-4" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></a><a href="https://youtube.com/@thekitze" target="_blank" rel="noopener noreferrer" class="p-1.5 text-zinc-500 hover:text-white hover:bg-white/5 rounded-lg transition-all cursor-pointer" aria-label="YouTube"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-youtube w-4 h-4" aria-hidden="true"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.5
195 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="m10 15 5-3-5-3z"></path></svg></a></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><a href="https://benji.so" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">Benji</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">Your life OS</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">The companion app that keeps every area of your world in sync.</p></a><a href="https://zerotoshipped.com" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">Zero to Shipped</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">Ship products, not side projects</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">The ultimate Next.js boilerplate for building and launching real products.</p></a><a href="https://dmx.to" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">DMX</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">Mindful Twitter/X</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">The intentional X client for macOS. Reclaim your attention span.</p></a><a href="https://sotto.to" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">Sotto</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">Voice-to-text for macOS</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">Speak naturally. Type instantly. 100% local & private.</p></a><a href="https://passlock.dev" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">Passlock</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">Password manager with willpower</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">Lock passwords with time delays, word challenges, or hand the keys to someone you trust.</p></a><a href="https://glink.to" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">Glink</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">Changelogs that slap</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">Beautiful changelogs and roadmaps for your product.</p></a><a href="https://perkz.to" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">Perkz</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">GitHub access control</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">Sell access to private GitHub repositories.</p></a><a href="https://tubely.app" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">Tubely</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">YouTube Studio for Mac</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">Manage multiple YouTube channels in one native app.</p></a><a href="https://justwrite.ink" target="_blank" rel="noopener noreferrer" class="group flex flex-col p-6 rounded-xl border border-white/5 bg-zinc-900/20 hover:bg-zinc-900/40 hover:border-white/10 transition-all duration-300 cursor-pointer" style="opacity:0;transform:translateY(20px)"><div class="flex items-start justify-between mb-4"><h3 class="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors">JustWrite</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4 text-zinc-700 group-hover:text-zinc-500 transition-colors" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><p class="text-sm font-medium text-zinc-400 mb-2 group-hover:text-zinc-300 transition-colors">Distraction-free writing</p><p class="text-sm text-zinc-500 leading-relaxed line-clamp-2">A minimal writing app that helps you focus on what matters.</p></a></div><div class="mt-16 text-center"><a href="https://kitze.io/projects" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-sm text-zinc-600 hover:text-zinc-400 transition-colors">View all projects <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div></section><footer class="border-t border-white/[0.06] bg-ink py-16 text-white"><div class="mx-auto w-full max-w-6xl px-5 sm:px-8"><div class="grid grid-cols-2 gap-10 md:grid-cols-5 md:gap-8"><div class="col-span-2 space-y-4 md:col-span-1"><a href="/" aria-label="Sizzy home" class="inline-flex items-center gap-2.5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="h-8 w-8"><rect x="1" y="1" width="30" height="30" rx="8" fill="#141417" stroke="rgba(255,255,255,0.14)"></rect><rect x="6.5" y="8" width="19" height="12" rx="2" fill="none" stroke="rgba(255,255,255,0.78)" stroke-width="1.5"></rect><rect x="11" y="12" width="12" height="12" rx="2" fill="#141417" stroke="rgba(255,255,255,0.78)" stroke-width="1.5"></rect><rect x="15.5" y="16" width="7" height="10" rx="1.5" fill="#141417" stroke="#ff6a3d" stroke-width="1.5"></rect></svg><span class="text-[17px] font-semibold tracking-tight text-white">Sizzy</span></a><p class="max-w-xs text-sm text-zinc-500">The browser for web developers. Projects, devices, sessions, debugging, capture, terminals and agents in one window.</p></div><nav aria-label="Product" class="space-y-4"><h4 class="text-sm font-semibold text-white">Product</h4><ul class="flex flex-col gap-3 text-sm text-zinc-500"><li><a href="/features" class="transition-colors hover:text-white">What's inside</a></li><li><a href="/#devices" class="transition-colors hover:text-white">Devices</a></li><li><a href="/#debugging" class="transition-colors hover:text-white">Debugging panel</a></li><li><a href="/#agents" class="transition-colors hover:text-white">Agents and terminals</a></li><li><a href="/#pricing" class="transition-colors hover:text-white">Pricing</a></li><li><a href="/#faq" class="transition-colors hover:text-white">FAQ</a></li></ul></nav><nav aria-label="Resources" class="space-y-4"><h4 class="text-sm font-semibold text-white">Resources</h4><ul class="flex flex-col gap-3 text-sm text-zinc-500"><li><a href="/blog" class="transition-colors hover:text-white">Blog</a></li><li><a href="/tools" class="transition-colors hover:text-white">Free tools</a></li><li><a href="https://glink.so/kitze/sizzy/changelogs" target="_blank" rel="noopener noreferrer" class="transition-colors hover:text-white">Changelog</a></li><li><a href="https://docs.sizzy.co" target="_blank" rel="noopener noreferrer" class="transition-colors hover:text-white">Documentation</a></li><li><a href="https://glink.so/kitze/sizzy" target="_blank" rel="noopener noreferrer" class="transition-colors hover:text-white">Feedback</a></li><li><a href="https://portal.sizzy.co/login" class="transition-colors hover:text-white">Sign in</a></li><li><a href="https://portal.sizzy.co/signup" class="transition-colors hover:text-white">Start free trial</a></li></ul></nav><div class="space-y-4"><h4 class="font-semibold text-sm text-white">Connect</h4><div class="flex flex-col gap-3 text-sm text-zinc-500"><a href="https://x.com/thekitze?ref=sizzy" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors cursor-pointer">Twitter / X</a><a href="/cdn-cgi/l/email-protection#127a7b52797b6668773c7b7d" class="hover:text-white transition-colors cursor-pointer">Support</a><a href="https://kitze.io?ref=sizzy" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors cursor-pointer">kitze.io</a></div></div><div class="space-y-4"><h4 class="font-semibold text-sm text-white flex items-center gap-2">More from Kitze<span class="text-[10px] text-zinc-600 font-normal">â</span></h4><div class="flex flex-col gap-3 text-sm text-zinc-500"><a href="https://zerotoshipped.com?utm_source=sizzy&utm_medium=footer&utm_campaign=crosspromo" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors group flex items-center gap-1 cursor-pointer">Zero to Shipped<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a><a href="https://dmx.to?utm_source=sizzy&utm_medium=footer&utm_campaign=crosspromo" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors group flex items-center gap-1 cursor-pointer">DMX<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a><a href="https://sotto.to?utm_source=sizzy&utm_medium=footer&utm_campaign=crosspromo" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors group flex items-center gap-1 cursor-pointer">Sotto<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-lin
19ejoin="round" class="lucide lucide-external-link h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a><a href="https://justwrite.ink?utm_source=sizzy&utm_medium=footer&utm_campaign=crosspromo" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors group flex items-center gap-1 cursor-pointer">JustWrite<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a><a href="https://tubely.cc?utm_source=sizzy&utm_medium=footer&utm_campaign=crosspromo" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors group flex items-center gap-1 cursor-pointer">Tubely<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a><a href="https://passlock.to?utm_source=sizzy&utm_medium=footer&utm_campaign=crosspromo" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors group flex items-center gap-1 cursor-pointer">Passlock<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a><a href="https://tinkerer.club?utm_source=sizzy&utm_medium=footer&utm_campaign=crosspromo" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors group flex items-center gap-1 cursor-pointer">Tinkerer Club<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a><a href="/apps" class="pt-1 font-medium text-zinc-400 hover:text-white transition-colors cursor-pointer">More apps â</a></div></div></div><div class="mt-16 pt-8 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-4"><div class="text-xs text-zinc-600">© <!-- -->2026<!-- --> Kitze. All rights reserved.</div><div class="flex items-center gap-2 text-xs text-zinc-600"><span>"Built" by</span><a href="https://x.com/thekitze" target="_blank" rel="noopener noreferrer" class="text-zinc-400 hover:text-white transition-colors cursor-pointer">@thekitze</a><span>with</span><span class="inline-flex gap-1"><span>ð¡</span><span>&</span><span>swearing at LLMs</span></span></div></div></div></footer></main><div class="pointer-events-none fixed inset-0 z-[100]"></div></div>
vendor: 126 bytes, lines 19-21
19 20 21 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
21<script id="vike_pageContext" type="application/json">{"pageId":"\\/pages\\/blog","routeParams":{}}</script>
21 22
22<script id="vike_globalContext" type="application/json">{}</script>
22 23
23<script src="/assets/entries/entry-client-routing.0GmFBhWH.js" type="module" async></script>
23 24 <link rel="modulepreload" href="/assets/entries/pages_blog.ByY1Gror.js" as="script" type="text/javascript"> 25 <link rel="modulepreload" href="/assets/chunks/chunk-Du4XFavC.js" as="script" type="text/javascript"> 26 <link rel="modulepreload" href="/assets/chunks/chunk-RPM2kW_I.js" as="script" type="text/javascript"> 27 <link rel="modulepreload" href="/assets/chunks/chunk-C5T5hgJ0.js" as="script" type="text/javascript"> 28 <link rel="modulepreload" href="/assets/chunks/chunk-B8uhEr-7.js" as="script" type="text/javascript"> 29 <link rel="modulepreload" href="/assets/chunks/chunk-CuJXPB2l.js" as="script" type="text/javascript"> 30 <link rel="modulepreload" href="/assets/chunks/chunk-DeUDR3mG.js" as="script" type="text/javascript"> 31 <link rel="modulepreload" href="/assets/chunks/chunk-hC7-HMyC.js" as="script" type="text/javascript"> 32 <link rel="modulepreload" href="/assets/chunks/chunk-g_wlTIJS.js" as="script" type="text/javascript"> 33 <link rel="modulepreload" href="/assets/chunks/chunk-WtDPiIN1.js" as="script" type="text/javascript"> 34 <link rel="modulepreload" href="/assets/chunks/chunk-6mozCjL1.js" as="script" type="text/javascript"> 35
35<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"57fe684103fb41e8ae98804783d0a38b","r":1,"spa":2}' crossorigin="anonymous"></script>
35 36</body> 37 </html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.