Hey drukarnia fam! 👋
I’m a frontend developer who loves building things that are both fun and functional. My latest little side project is WhiteScreenTest.net — a minimal online tool that serves one purpose: turn your browser screen completely white (or black, or any solid color).
Sounds silly, right? It kind of is — and that’s the point. But beneath its simple UI is a thoughtful combination of frontend techniques, usability tweaks, and a touch of backend logic. Let me tell you how I built it, why I built it, and where I think it's going.
Why Build a Tool That Just Shows a White Screen?
It started as a joke. I wanted something to prank my coworker by turning his screen white and telling him his monitor was broken. But after I built the MVP, I realized this tool could also be useful for:
Monitor dead pixel testing
Studio lighting reflection checks
Online product photography
Mood lighting
Or just... pranks 😏
So I leaned into both sides: useful and useless — because let’s be honest, that’s kind of the internet’s sweet spot.
Tech Stack
Here's what’s running behind the scenes:
HTML5 — Semantic, clean, and minimal markup
Deep CSS — I call it "deep CSS" because I focused hard on getting fullscreen color rendering, fade transitions, and system-safe contrast just right. No Bootstrap here — pure, custom CSS for total control.
JavaScript (vanilla) — I went with pure JS instead of React or Vue because the functionality is tiny and I wanted it to load lightning-fast. It’s all about the user getting to the color screen in one click.
PHP (lightweight) — The site doesn’t rely heavily on backend logic, but I’m using PHP to serve the site, handle simple routing, and log some usage stats for fun (and maybe analytics in the future).
Some Interesting Frontend Challenges
Even though the project is tiny, it gave me some fun puzzles to solve:
1. Preventing UI Flash on Load
To give a polished experience, I used CSS @keyframes with fade-ins and preloaded everything in the <head>. There’s also a <noscript> fallback that gives users a basic experience even without JS.
2. Fullscreen API Support
Getting the fullscreen button working across Chrome, Firefox, Edge, and Safari was a headache. The Fullscreen API isn't totally standardized, and mobile browsers behave differently. I had to use:
element.requestFullscreen || element.webkitRequestFullscreen || element.msRequestFullscreen
And add checks for document.fullscreenElement before toggling.
3. Dark Mode + Color Picker
Eventually, I added the ability to switch to black and even let users choose any hex color. The trick was making sure the chosen color displays accurately on various display types — not every monitor handles pure #FFFFFF the same way.
