The latest articles on DEV Community by Hiago (@uphiago). https://dev.to/uphiago 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%2F1412091%2F76f7c266-2c39-4b1f-a7cf-f685182e9298.jpeg https://dev.to/uphiago en Hiago Mon, 16 Mar 2026 05:09:15 +0000 https://dev.to/uphiago/i-vibecoded-a-site-to-visualize-everything-between-your-keypress-and-the-kernel-39k1 https://dev.to/uphiago/i-vibecoded-a-site-to-visualize-everything-between-your-keypress-and-the-kernel-39k1 <p>Every time I tried to explain <strong>PTYs, multiplexers, or shell frameworks</strong> to someone, I ended up drawing boxes on paper.</p> <p>So I built <strong>Shellcraft</strong> — an interactive reference that maps the layers between your <strong>keyboard and the kernel</strong>.</p> <h2> What’s inside </h2> <p><strong>Layers diagram</strong><br> Click any layer to expand details, learn key facts, and see common misconceptions.</p> <p><strong>Execution flow</strong><br> An animated walkthrough of what actually happens when you run <code>git status</code> — from the keypress to the output on your screen.</p> <p><strong>Ecosystem map</strong><br> An interactive graph mapping <strong>20+ tools</strong> across the terminal ecosystem.</p> <h2> Stack </h2> <p>Vite + React 18<br> React Flow<br> Custom CSS (no UI framework)</p> <p>Available in <strong>English and Portuguese</strong>.</p> <h2> Links </h2> <p>Site: <a href="https://shellcraft.vercel.app" rel="noopener noreferrer">https://shellcraft.vercel.app</a><br> Repo: <a href="https://github.com/uphiago/shellcraft" rel="noopener noreferrer">https://github.com/uphiago/shellcraft</a></p> <p>Feedback is very welcome - especially regarding <strong>technical accuracy</strong>.</p> <p>linux · terminal · webdev · opensource</p> computerscience linux showdev vibecoding