Posts

The Playwright --with-deps Flag: When It Helps and When It Breaks Production When deploying PixelPerfect Screenshot API to Render.com, I followed what seemed like obvious advice: on a Linux server, use --with-deps when installing Playwright. Every tutorial said so. Every Stack Overflow answer confirmed it. So I added it to the build command and pushed. The build failed immediately. The fix, once I found it, was to remove the flag entirely — the exact thing everyone said was required. The moment I did, the build succeeded, Chromium launched without errors, and screenshots worked in production on the first request. This article explains what actually happened, why managed platforms behave differently than bare Linux servers, and how to figure out which approach your specific hosting environment needs. What the Failure Looked Like Here's the exact output from the Render.com build logs with --with-deps : Feb 6 12:04:02 AM ==> Building with command: ...
Cross-Platform npm Scripts: Why Your Windows Commands Fail on macOS/Linux (and How to Fix Them) I'll be honest — this one caught me completely off guard. I was deep into building PixelPerfect Screenshot API , everything was running beautifully on my Windows machine, and then I tried to spin up the frontend on a Linux server and got slapped with this: 'set' is not recognized as an internal or external command At first I thought something was broken with my Node installation. Then I thought it was a Render.com configuration issue. It took me an embarrassingly long time to realize the problem was sitting right there in my package.json — a single word: set . If you've hit this wall, this article is for you. And if you haven't hit it yet, read this anyway — because you will. The Platform Compatibility Problem ✅ Windows (Works) "start": "set REACT_APP_API_URL=http://localhost:8000 && re...
Implementing AdSense and Google Analytics: What the Guides Don't Tell You There's no shortage of tutorials on adding Google AdSense and GA4 to a website. Most of them cover the happy path — copy this snippet, paste it here, done. What they skip over is why certain decisions matter, what breaks if you get the order wrong, and how these two systems actually interact once they're both running. I went through this setup twice: once for the OneTechly blog on Blogger, and once for PixelPerfect Screenshot API — a React SPA with a proper build pipeline. The second one was where things got genuinely interesting, because the standard advice for adding AdSense to a static HTML site doesn't quite translate to a build-based React project. There are file placement rules, CSP header implications, and an ads.txt authorization step that everyone mentions but few explain properly. This article covers both tools — what they actually do, how to implement them correct...
The Refresh Problem: Why Modern Web Apps Break on Direct URL Access The first time I hit this, I thought something was wrong with Render's deployment pipeline. I had just pushed PixelPerfect Screenshot API to production — the React frontend was live, navigation between pages was smooth, everything looked correct. Then I bookmarked the dashboard URL and opened it in a new tab. Blank page. Not a 404 with a message. Not an error I could trace. Just nothing. Clicking through from the homepage worked. Typing the URL directly didn't. Sharing a link to a specific page produced the same result for anyone I sent it to. The cause turned out to be one missing file: _redirects . One line of configuration that took two minutes to add once I understood what was happening. Getting to that understanding took longer — because the problem isn't a bug, it's an architectural mismatch between how React Router works and how web servers work by default. The Core Misma...