The latest articles on DEV Community by IKER PEREZ (@ikerperez12). https://dev.to/ikerperez12 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%2F3985863%2F5baa6141-2f38-4c50-8fc9-366a035c36c9.jpeg https://dev.to/ikerperez12 en IKER PEREZ Mon, 15 Jun 2026 15:50:11 +0000 https://dev.to/ikerperez12/ui-ip-toolkit-a-standalone-static-visual-catalog-for-cssjs-components-19c2 https://dev.to/ikerperez12/ui-ip-toolkit-a-standalone-static-visual-catalog-for-cssjs-components-19c2 <h1> UI IP Toolkit - A standalone static visual catalog for CSS/JS components </h1> <p>I built UI IP Toolkit to solve my own workflow problem: I kept losing useful UI snippets (buttons, loaders, CTA blocks, glassmorphic cards, layout grids) across old projects and directories.</p> <ul> <li> <strong>Live site:</strong> <a href="https://ui-ip-toolkit.vercel.app/" rel="noopener noreferrer">https://ui-ip-toolkit.vercel.app/</a> </li> <li> <strong>GitHub Repository:</strong> <a href="https://github.com/ikerperez12/UI-IP-Toolkit-v4.0" rel="noopener noreferrer">https://github.com/ikerperez12/UI-IP-Toolkit-v4.0</a> </li> </ul> <h2> Design Philosophy </h2> <ul> <li> <strong>Zero dependencies:</strong> Raw HTML, CSS, and vanilla JS. No NPM packages, framework configurations, or build steps required.</li> <li> <strong>Copy-paste ready:</strong> Visual preview cards with one-click copy buttons for immediate use in any stack.</li> <li> <strong>Light/Dark mode:</strong> Clean design system focusing on micro-interactions, sleek gradients, and responsive layouts.</li> <li> <strong>Visual catalog:</strong> Catalog of gradients, buttons, fonts, loading states, hover treatments, glass surfaces, layout fragments, and UI patterns.</li> </ul> <p>How do you manage your personal code/CSS snippet collections? Hope this is useful to others!</p> css javascript webdev ui IKER PEREZ Mon, 15 Jun 2026 15:50:07 +0000 https://dev.to/ikerperez12/i-built-a-browser-based-desktop-environment-ip-linux-with-react-typescript-and-vite-6m0 https://dev.to/ikerperez12/i-built-a-browser-based-desktop-environment-ip-linux-with-react-typescript-and-vite-6m0 <h1> I built a browser-based desktop environment (IP Linux) with React, TypeScript and Vite </h1> <p>I have been working on a project called <strong>IP Linux</strong>: a browser-based desktop environment that runs as a static web app.</p> <ul> <li> <strong>Live site:</strong> <a href="https://ip-os-linux.vercel.app/" rel="noopener noreferrer">https://ip-os-linux.vercel.app/</a> </li> <li> <strong>GitHub Repository:</strong> <a href="https://github.com/ikerperez12/IP-OS-LINUX" rel="noopener noreferrer">https://github.com/ikerperez12/IP-OS-LINUX</a> </li> </ul> <p>It is not a real Linux distribution, and it does not run native binaries. The idea is different: I wanted to explore how far a polished desktop-like experience can go inside a normal browser tab.</p> <p>The result is a small web OS-style environment with:</p> <ul> <li>A splash / entry screen</li> <li>A desktop with icons, folders, and widgets</li> <li>A top panel with system controls</li> <li>A dock and app launcher</li> <li>Resizable and draggable windows</li> <li>Virtual workspaces</li> <li>Snap assist</li> <li>A global search / Spotlight-style command palette</li> <li>Local-first apps (Files, Terminal, settings, player)</li> <li>Reactive wallpapers</li> <li>Glass UI and visual effects</li> </ul> <h2> Why I built it </h2> <p>Most web demos are landing pages, dashboards, or small single-purpose apps. I wanted to build something that feels more like an environment.</p> <p>I was interested in questions like:</p> <ul> <li>Can a web app feel physical and desktop-like?</li> <li>How should windows behave inside a browser viewport?</li> <li>How far can local-first storage go before a backend is actually needed?</li> <li>How do you organize many small apps without making the UI messy?</li> </ul> <p>IP Linux became a way to test all of that in one project.</p> <p>The app includes a catalog of built-in apps and tools: Files, Terminal, Browser, Settings, App Store, Music Player, Matrix Rain, games, developer tools, productivity apps, and visual utilities. The virtual file system and user preferences are stored locally in the visitor's browser with IndexedDB/localStorage. There is no backend, no account system, and no required environment variables for the public release.</p> <p>Would love to get feedback on the interaction design, responsiveness, or features!</p> webdev react typescript opensource