When we set out to build SolitaireOnline.com, we didn't just want to build another card website. We wanted to build a virtual time machine—a high-fidelity recreation of the Windows 95 operating system, complete with draggable windows, customizable desktop themes, retro audio, and, of course, classic card games. But we had a strict constraint: it had to feel as fast and lightweight as the original desktop environments from the 1990s.
In a modern web landscape dominated by heavy frameworks and multi-megabyte JavaScript bundles, looking backward proved to be our greatest forward step. Here is a technical look at how we built a fully-featured, retro Progressive Web App (PWA) using vanilla web tools without the bloat.
1. The Vanilla Strategy: Zero Frameworks
Our first major architectural decision was to completely reject modern JavaScript frameworks like React, Vue, or Angular. While these tools make building interfaces fast, they introduce substantial overhead. A React-based solitaire game often requires downloading, parsing, and executing several hundred kilobytes of JavaScript before the user can make their first card move.
Instead, we wrote the entire game suite in Vanilla JavaScript. Our rendering engines communicate directly with the browser's Document Object Model (DOM) using native APIs. By avoiding framework abstractions, our entire application code—including card logic, matchmaking sockets, state managers, and drawing routines—clocks in at under 100KB combined. This means our pages load and run instantly on any device, from a high-end desktop monitor to a budget mobile phone.
2. DOM Rendering vs. Canvas
Many web-based card games render their boards using a single HTML5 <canvas> element. While canvas is great for rendering thousands of moving particles, it is terrible for accessibility, DOM inspection, and responsive scaling.
We chose to render cards as individual HTML elements (<div>s). Each card has its own DOM structure and uses absolute positioning. This approach offers several massive advantages:
- CSS Transform Power: We leverage the browser's hardware-accelerated GPU layers to handle card dragging, flipping, and dropping animations smoothly at 60 frames per second.
- Authentic Drag-and-Drop: Using native pointer and touch events, cards stick directly to the player's finger or cursor with zero input lag.
- SVG Vector Scaling: Card faces are rendered using highly optimized SVG vector images, ensuring that whether you are playing on a tiny screen or a 4K desktop monitor, card details remain pixel-perfect.
3. Going Offline: The PWA Architecture
Solitaire is historically a game of convenience—something you play on an airplane, in a subway, or during a internet outage. To enable this, we structured the site as a Progressive Web App (PWA) using a custom Service Worker.
Our service worker intercepts network requests and implements a "cache-first" strategy for all static assets (scripts, styles, icons, sound files, and images). The first time you visit our site, the assets are saved directly into the browser's Cache Storage. The next time you open the app, it loads instantly from the cache, requiring zero network requests. If you lose your internet connection entirely, the game engine detects it and lets you continue playing solo games uninterrupted.
4. Retro Style, Modern Performance
To achieve the retro Windows 95 style, we created a specialized CSS design system using native variables. Simulating classic UI elements like the thick, raised window borders and sunken input fields requires precise shadow configurations:
/* Classic Win95 3D Border Effects */
:root {
--win95-bg: #c0c0c0;
--win95-white: #ffffff;
--win95-light: #dfdfdf;
--win95-dark: #808080;
--win95-darker: #0a0a0a;
--raised: inset 1px 1px 0px var(--win95-white),
inset -1px -1px 0px var(--win95-dark),
1px 1px 0px var(--win95-darker);
--sunken: inset 1px 1px 0px var(--win95-dark),
inset -1px -1px 0px var(--win95-white),
1px 1px 0px var(--win95-light);
}
By applying these variables directly to clean HTML layouts, we avoid loading external image assets for UI borders, drastically reducing page sizes and rendering cycles.
Conclusion: The Speed of Simplicity
Rebuilding the 1990s desktop internet taught us that user experience is still deeply rooted in performance. By pairing modern PWA caching capabilities with framework-free, highly optimized vanilla JavaScript, we built a gaming platform that is incredibly fast, fully responsive, and highly durable.
Try the lightweight speed for yourself: Launch the Solitaire Suite homepage and start playing instantly.