The latest articles on DEV Community by Louis (@tin_59b0856d05ee1b6923b8). https://dev.to/tin_59b0856d05ee1b6923b8 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3965681%2Fa6d07b47-536a-43b6-9031-e9c3e20b9d81.jpeg https://dev.to/tin_59b0856d05ee1b6923b8 en Louis Wed, 03 Jun 2026 07:23:59 +0000 https://dev.to/tin_59b0856d05ee1b6923b8/i-built-a-new-tab-replacement-for-developers-drowning-in-tabs-kfc https://dev.to/tin_59b0856d05ee1b6923b8/i-built-a-new-tab-replacement-for-developers-drowning-in-tabs-kfc <p>Every developer I know has the same problem: too many tabs, no context, and a vague sense of dread every time they open a new one.</p> <p>I'd open a new tab and stare at Chrome's default page — a blank slate with zero information about what I was working on. Was it the PR I needed to review? The Figma file from yesterday? The Stack Overflow answer I had open?</p> <p>So I built <strong><a href="https://chromewebstore.google.com/detail/tablobby/kggnkpdihacnefnoomfohaalikbflmal" rel="noopener noreferrer">TabLobby</a></strong> — a Chrome/Brave extension that replaces your New Tab page with an actual workspace.</p> <h2> What it does </h2> <p>Every time you open a new tab, instead of a blank page you see:</p> <ul> <li> <strong>All your open windows</strong> — grouped, labeled, with every tab visible at a glance</li> <li> <strong>Saved collections</strong> — capture your current context (project tabs, research tabs, anything) with one click. Restore it later exactly as you left it.</li> <li> <strong>Live search</strong> — ⌘K across all open tabs, saved sessions, and collections instantly</li> <li> <strong>Duplicate detection</strong> — red DUP badge when you've got the same URL open twice (happens more than I'd like to admit)</li> <li> <strong>Drag &amp; drop</strong> — move tabs between windows, reorder them, with undo support (Ctrl+Z)</li> <li> <strong>Bookmark manager</strong> — right panel with your full bookmark tree, pin frequently used folders</li> <li> <strong>Dark mode</strong> — warm amber accent, not the harsh blue-white most extensions default to</li> </ul> <h2> The stack </h2> <p>Built with React + TypeScript, Chrome Manifest V3, Vite, and <code>@dnd-kit</code> for drag &amp; drop. Self-hosted DM Sans font (no Google Fonts CDN in extensions), PostHog for analytics, and a full Playwright test suite running in GitHub Actions CI.</p> <p>The hardest part wasn't the UI — it was getting drag &amp; drop to feel <em>right</em>. Tabs need to snap back with a rubber-band animation when dropped, not just teleport. Spent an embarrassing amount of time on <code>cubic-bezier(0.16, 1, 0.3, 1)</code> at 580ms.</p> <h2> The "aha" moment I was building for </h2> <blockquote> <p>Open a new tab → see exactly where you left off → continue without losing 30 seconds reconstructing your mental model.</p> </blockquote> <p>That's it. Not a productivity system. Not another todo app. Just: you open a new tab, you know what you're doing.</p> <h2> Try it </h2> <p><strong><a href="https://chromewebstore.google.com/detail/tablobby/kggnkpdihacnefnoomfohaalikbflmal" rel="noopener noreferrer">Add TabLobby to Chrome/Brave →</a></strong></p> <p>It's free. No account needed. Your data stays local (chrome.storage — nothing leaves your browser).</p> <p>Would love feedback — especially from people with 50+ tabs open right now. 👀</p> chrome productivity typescript webdev