DEV Community: Ruhul Amin

EnvGuard 3.0: Environment Guardian, CI & 99% Smaller

Ruhul Amin — Sun, 12 Jul 2026 12:00:03 +0000

Missing keys and inconsistent values aren't the only risk in .env files. The bigger danger is accidentally committing a real API key or secret to Git.

EnvGuard 3.0.0 focuses on preventing that while introducing better environment validation—and the extension package is now 99.6% smaller.

🚨 Secret Detection & Leak Prevention
EnvGuard now detects common credentials including:

AWS Access Keys
Stripe Live Keys
GitHub Tokens
Slack Tokens
Google API Keys
Private Keys
JWTs
Generic secret-like values

Template files (.env.example, .env.sample, etc.) and placeholder values are ignored to reduce false positives.

If a file contains real secrets and isn't protected by .gitignore, EnvGuard warns you before those credentials accidentally end up in Git.

📋 Schema Validation

Add an envguard.schema.json file to define rules for your environment variables.You can validate:
Required keys
Numbers
Booleans
URLs
Emails
Regex patterns
Enum values

Validation errors appear directly inside VS Code and are also used by the CLI and Git hooks.

🔄 .env.example Auto Sync
Keeping .env.example updated is now automatic.EnvGuard can:
Preserve comments and ordering
Remove deleted keys
Add new keys
Keep existing placeholder values
Enable auto-sync to regenerate the file every time a .env file is saved.

⚙️ CI Support
The bundled CLI now supports:
node dist/cli/validate.js --ci --json
--ci : Fails the pipeline on validation errors.
--json : Outputs machine-readable validation results.
The same validation rules now run consistently in VS Code, Git hooks, and CI pipelines.

📦 99.6% Smaller Package
The biggest improvement wasn't a feature—it was packaging.
EnvGuard 2.0 shipped as a ~29.4 MB extension because development dependencies were accidentally included by:

Bundling with esbuild
Shipping only compiled files
Excluding unnecessary dependencies
Tightening .vscodeignore

the package shrank to ~103 KB.
Version Package Size
2.0.0 ~29.4 MB
3.0.0 ~103 KB
That's roughly a 99.6% reduction with no functionality removed.

Try It
Update EnvGuard to 3.0.
Test secret detection with a fake credential.
Generate an envguard.schema.json.
Sync your .env.example.
Run the CLI in CI with --ci --json.

Everything still runs 100% locally.

No telemetry
No network calls
No accounts
Your secrets never leave your machine

If these new features help prevent even one leaked credential or broken deployment, they've done their job. 🛡️

— Tuhin

EnvGuard Update: Catch Broken .env Files Before They Ever Reach Production

Ruhul Amin — Mon, 22 Jun 2026 09:13:36 +0000

Two new features in EnvGuard — live inline diagnostics in the editor and a git pre-push validation hook — turn 'works on my machine' env bugs into errors you see before you push.

If you've ever shipped a deploy that fell over because .env.production was missing a key that existed in your local .env, this update is for you.

The latest release adds two new lines of defense so a missing or empty environment variable stops being a runtime surprise and becomes something you see while you're typing and before you push:

Inline Diagnostics — live, ESLint-style squiggles right inside your .env files.
Pre-Push Validation Hook — a git pre-push hook that validates your environment files automatically on every git push.
Both are built on the same idea EnvGuard has always had: .env.example is your contract. It declares which keys are required. Everything else is checked against it.

Inline Diagnostics — like ESLint, but for your .env Until now, EnvGuard surfaced problems in the sidebar and report panel. Useful, but you had to go look. The new diagnostics service brings validation directly into the editor, the same way a linter underlines your code.

Open any .env / .env.* file and EnvGuard treats the .env.example sitting in the same directory as the source of truth for required keys, then underlines two kinds of problems:

Missing required variable — a key defined in .env.example is absent → squiggle on the first line.
Empty required value — a required key is present but blank (KEY=) → squiggle on that key's exact line, with the key token highlighted.

.env.example (the contract)

DATABASE_URL=
REDIS_HOST=
STRIPE_KEY=

.env (what you actually have)

DATABASE_URL=postgres://localhost/dev
REDIS_HOST= # ⚠ "REDIS_HOST" is empty but required by .env.example
# ⚠ Missing required variable "STRIPE_KEY"
It updates as you type
Findings refresh live — no save required. The service parses the live document text, debounced at 300ms so it stays smooth while you type. And because the baseline matters too, editing .env.example re-lints every open env file: add a key to the template and every .env that's now missing it lights up instantly.

The .env.example template itself is never linted (it's the contract, not a target), and non-dotenv files (.properties, .yml) are left alone.

Configurable
Setting Default Description
envguard.diagnostics.enabled true Turn inline diagnostics on/off
envguard.diagnostics.severity warning error, warning, information, or hint
Change the severity and every open file re-lints immediately — set it to error if you want missing env vars to scream at you in red.

Pre-Push Validation Hook — stop bad config at the gate Inline diagnostics help you. But what about the teammate who didn't notice the squiggle, or the CI config that drifted? That's what the pre-push hook is for: a last automatic checkpoint that runs on every git push, before anything reaches the remote.

If you can't see just press crtl+shift+p and search this you'll find it.

It have two mode.By default it is warn mode and if want to change to Strict mode then:

Opne the settings in code editor and serach " envguard hook mode"
here you see option change as it is.

Run EnvGuard: Install Pre-Push Hook from the Command Palette (or click the 🛡 button on the Environment Files view) and EnvGuard writes a .git/hooks/pre-push for you. From then on, git push runs three checks across all your discovered env files:

Missing variables — a required key (from .env.example) is absent from an env file.
Empty values — a required key is present but has no value (KEY=).
Consistency — a key exists in some env files but is missing from others (e.g. REDIS_HOST defined in .env but not in .env.production).
$ git push
EnvGuard: ⚠ Missing variables:

STRIPE_KEY EnvGuard: ⚠ Empty values:
REDIS_HOST EnvGuard: ⚠ Inconsistent keys across env files:
SESSION_SECRET (missing from: .env.production) Two modes: nudge or block Set envguard.gitHook.mode in Settings:

Start in warn to build trust, flip to strict once your team is ready to enforce it. And you don't have to reinstall to switch — changing the mode automatically rewrites the installed hook. EnvGuard watches the setting and updates the script in place.

It plays nicely with your existing hooks
If you already have a pre-push hook, EnvGuard backs it up to pre-push.envguard-backup before installing, and restores it on uninstall. Run EnvGuard: Uninstall Pre-Push Hook and you're exactly back where you started.

The interesting part: one validator, two homes
Here's the architecture detail I'm proud of. A git hook runs in plain Node, from a shell, outside the VS Code extension host — there's no vscode module to import. The extension, obviously, runs inside it. So how do you avoid writing the validation logic twice?

You don't duplicate it. The actual validation lives in a small, VS Code-free PrePushValidationService that only consumes plain EnvFile data models and reuses the existing ComparisonService for all the diffing. No new comparison logic was written — the pre-push checks are the same engine that powers the sidebar audit.

That pure service is then driven by two thin entry points:

Inside the extension, it's wired up in extension.ts like every other feature.
For the hook, a tiny standalone CLI (out/cli/validate.js) walks the repo with Node's fs (mirroring the extension's discovery include/exclude rules), runs the same validator, and prints results.
The generated hook is just:

A couple of deliberate safety choices baked into that CLI:

A hook must never crash a legitimate push. Unreadable or unparseable files are skipped silently, and any unexpected error in the validator exits 0 (push proceeds) rather than blocking you over a bug in my code. Only an actual finding in strict mode exits non-zero.
Cross-platform paths. The hook script is POSIX sh (git runs it via the bundled shell even on Windows), so the CLI path is forward-slashed regardless of OS.
This is the same "pure logic never imports vscode" rule EnvGuard has followed from day one — and it's exactly what made shipping a CLI a small addition instead of a rewrite.

Try it
Install / update EnvGuard from the extension market.
Open a project with a .env.example and a .env.
Watch the inline squiggles appear as you edit.
Run EnvGuard: Install Pre-Push Hook, then git push and see it validate.
Everything still runs 100% locally — no telemetry, no network, no accounts. Your secrets never leave your machine.

The project is open source. If pre-push validation or live diagnostics save you one broken deploy, that's a win. Try it out, and let me know what you'd want guarded next. 🛡️

— Tuhin

Screen Studio: A Free Screen Recorder & Screenshot Editor That Never Touches the Internet

Ruhul Amin — Sun, 21 Jun 2026 09:58:54 +0000

For the last few months I've been building Screen Studio — a Chrome extension that captures screenshots, records your screen, and lets you edit and export videos without ever sending a single byte to a server.

No backend. No account. No tracking. No cloud upload. Everything happens locally on your own machine.

In this post I'll walk you through every feature, show you the actual UI, and explain the one thing most people get wrong about browser extensions: where your files are really stored.

It's completely free, and I'd genuinely love your feedback before the final release. 🙏

🎯 What It Does (in one line)
Capture screenshots, record your screen + webcam + mic, edit the recording on a real timeline, and export to PNG / JPG / PDF / WebM / MP4 / GIF — all offline.

Let me show you each part.

The Popup — Your Control Center
The moment you click the extension icon, you get everything in one clean panel.

Screen Studio popup UI — capture modes on top, screen recording options below.

Capture Modes:

📸 Visible Area — grab exactly what's on screen
✂️ Custom Region — drag-select any part of the page
📄 Full Page — captures the entire scrolling page, stitched into one tall image
Choose your format: PNG (lossless) or JPEG (smaller files)
Screen Recording — 4 sources:

🗂️ Tab — record just the current browser tab
🖥️ Screen — your entire desktop
🪟 Window — a single app window
🎥 Webcam — camera-only recording
Plus two toggles that make tutorials look professional:

🎙️ Microphone audio — narrate while you record
🎥 Webcam bubble — a draggable, circular camera overlay (great for classroom & YouTube tutorials)
Everything also has keyboard shortcuts — Ctrl+Shift+S for visible capture, Ctrl+Shift+F for full page, Ctrl+Shift+E for region, and Alt+Shift+V to start/stop recording.

The Screenshot Editor — Annotate Before You Share
After a capture, the screenshot opens straight into a full editor. No "save then open another app" — it's instant.

The editor: annotation tools on the left, live canvas in the center, layers panel on the right.

What you can do here:

✏️ Draw, arrow, rectangle, circle, line to point things out
🔤 Add text labels
🌫️ Blur / pixelate sensitive info (passwords, emails, tokens)
✂️ Crop to the perfect frame
🎨 Pick colors and stroke width
🗂️ Layers panel — every annotation is a separate, editable layer (non-destructive!)
↩️ Full undo / redo history
📤 Export to PNG, JPG, or PDF — or copy straight to clipboard
This is built on a real canvas engine, so your edits never bake into the image until you export. Change your mind anytime.

The Vault — Your Private Local Library
Every screenshot and recording is saved into the Vault — a searchable library that lives inside your browser, on your disk.

The Vault: storage meter at the top, searchable grid of all your captures below.

Features:

🔍 Search by name or date
🏷️ Filter by Screenshots / Videos / All
↕️ Sort by date
📊 A live storage meter so you always know how much space you're using
▶️ Click any video to jump into the editor
And here's the important part most people don't know about 👇

💾 Where Are Your Files Actually Stored? (The Honest Answer)
This is the part I'm most proud of, because it's where privacy and performance meet.

Your captures are not saved to some company's cloud. They're written to IndexedDB, which the browser stores on your local SSD/hard drive. That's why everything is instant and works even with zero internet.

But here's the nuance between browsers:

🟢 On Chrome
Chrome reports your real, available disk space. If you have 200 GB free on your SSD, the extension can use a big chunk of that. You can record long sessions and store dozens of videos. Your hardware is the only real limit. As a runaway-capture safety rail, a single recording is capped at 2 hours.

🔵 On Brave
Brave does something clever for privacy / anti-fingerprinting: it fakes the storage quota at a fixed ~2 GB for every site, no matter how big your actual drive is. Websites can't probe your real disk size to identify you.

That's great for privacy — but it means the same recording that fits easily on Chrome can hit a wall on Brave. So Screen Studio detects Brave at runtime and adapts: it caps a single recording at 1 hour, so the take always saves cleanly to the Vault instead of dying mid-recording when the faked ~2 GB quota fills up.

TL;DR: Your files live on your SSD. Chrome gives you your full disk (2 h max per take). Brave protects your privacy by faking a ~2 GB cap — and Screen Studio detects it and stops cleanly at 1 h so you never lose a recording.

The Video Editor — Edit & Export Without Leaving the Browser
Recordings open into a proper, timeline-based video editor. This isn't a toy trimmer — it's a multi-track editor.

The recording editor: clip controls on the left, multi-track timeline at the bottom with video, audio, music, and overlay lanes.

What you can do:

⚡ Speed control — 0.5× to 2× playback
✂️ Split at playhead and trim clips
➕ Merge multiple videos together
🎵 Add background music (separate audio track with waveform)
🔇 Mute the original recorded sound
🔤 Text overlays that appear at chosen moments
🌫️ Blur overlays to hide sensitive info in the video
🎚️ Independent audio, music, and overlay lanes on the timeline
The export engine is the secret weapon:

Exports use WebCodecs (the modern, GPU-accelerated browser video API) via mediabunny — no ffmpeg, no WebAssembly bloat, no server round-trip
Export to WebM, MP4, or GIF
If you made no edits, WebM does a lossless passthrough — it hands back the original recording untouched, basically instant
Edited timelines re-encode locally (VP9/VP8 + Opus for WebM, H.264 + AAC for MP4) on your own GPU/CPU — your video never leaves your computer
🔒 Why "Offline" Actually Matters Here
A lot of extensions say "private" but quietly upload your data. Screen Studio is built so it physically can't:

✅ host_permissions is empty — it doesn't have blanket access to your browsing (full-page capture asks for access only on the tab you're on)
✅ A strict Content-Security-Policy blocks loading any external script
✅ connect-src is locked to local sources — no analytics, no phone-home
✅ No login, no account, no email required
If you're recording a classroom session, a client demo, or anything sensitive — it never touches the internet.

💸 The Price: Free
Right now, Screen Studio is 100% free. Every feature in this post — capture, annotate, blur, record, multi-track editing, MP4/WebM/GIF export, the Vault — all free, no paywall, no watermark.

🙏 I'd Love Your Feedback
I just submitted Screen Studio to the Chrome Web Store (v0.9.0, beta), and before the wider launch I want to hear from real developers and creators:

Would you use this for tutorials / bug reports / classroom recording?
What feature is missing that would make it a daily driver?
Anything confusing in the UI?
Drop a comment below — every bit of feedback helps me ship a better v1. 👇

If you build, teach, or report bugs for a living, this was made for you. Thanks for reading! 🚀

Protect Your .env Files Like a Pro

Ruhul Amin — Wed, 17 Jun 2026 06:19:17 +0000

I Built My First VS Code Extension(EnvGuard)

A few weeks ago, I noticed a problem that almost every developer faces sooner or later: configuration drift.

You add a new environment variable to your local .env file, everything works perfectly, and then deployment fails because the same variable is missing from .env.production or .env.example.

After dealing with this issue multiple times, I decided to build a solution.

Today, I'm excited to share (EnvGuard), my first published VS Code extension.

🎥 Video Tutorial

I've created a step-by-step tutorial showing how to install and use EnvGuard.

https://www.linkedin.com/posts/ruhul-amin-tuhin-abbabb2aa_envguard-vscode-visualstudiocode-ugcPost-7472891012936556544-YdfH/?utm_source=share&utm_medium=member_desktop&rcm=ACoAAEqO428BAevCyevkSQyim8vBXytMVDTLxFE

If you prefer watching rather than reading, the video covers everything from installation to comparing environment files.

What Is EnvGuard?

EnvGuard is a framework-agnostic environment file manager designed for developers working with:

Laravel
Node.js
React
Spring Boot
.NET
And many other frameworks

Its goal is simple:
Help developers detect missing configuration keys before they become production problems.**

The Problem

Imagine this situation:
.env
APP_NAME=MyApp
STRIPE_SECRET=xxxx
MAIL_HOST=smtp.example.com

.env.production
APP_NAME=MyApp
MAIL_HOST=smtp.example.com

The STRIPE_SECRET key is missing.

Everything works locally, but production crashes when payment functionality is used.This type of issue is surprisingly common in development teams.EnvGuard helps catch these problems before deployment.

Key Features

🔍 Smart Environment File Discovery
EnvGuard automatically scans your workspace and finds configuration files such as:

.env
.env.local
.env.production
.env.test
application.properties
application.yml
application.yaml

It intelligently skips folders like:

node_modules
vendor
build directories
virtual environments

to keep scans fast.

⚖️ Side-by-Side Comparison

Compare two configuration files instantly.

EnvGuard highlights:

Missing keys
Extra keys
Different values

This makes it easy to identify inconsistencies across environments.

🚨 Missing Key Detection

One of my favorite features.

EnvGuard audits environment files and immediately warns you when keys exist in one file but are missing from another.

This helps prevent deployment failures caused by forgotten configuration updates.

📊 Export Reports

Need to share issues with your team?

EnvGuard can export audit results into a JSON report for easy collaboration.

🎯 Click-to-Navigate

When EnvGuard detects an issue, simply click the item.

VS Code will automatically jump to the exact file and line number where the problem exists.

No manual searching required.

Privacy First

Since environment files often contain sensitive information, security was a top priority.

EnvGuard:

✅ Processes everything locally

✅ Makes zero external network requests

✅ Collects no telemetry

✅ Requires no account

Your secrets never leave your machine.

How To Get Started

Install EnvGuard from the VS Code Marketplace.
Open the EnvGuard sidebar.
Scan your workspace.
Compare environment files.
Review missing keys and inconsistencies.
Fix issues before they reach production.

Lessons Learned Building My First Extension

Building EnvGuard taught me a lot:

VS Code extension architecture
Workspace file scanning
Configuration parsing
Publishing to the marketplace
Developer-focused UX design

The biggest lesson was that building the extension is only half the job.

The other half is documentation, tutorials, feedback, and continuous improvement.

What's Next?

I'm actively working on improvements and new features.

Some ideas include:

Enhanced comparison views
Better reporting
Additional configuration formats
Team collaboration improvements

If you have suggestions, I'd love to hear them.

Try EnvGuard

If you're a developer who works with multiple environments, give EnvGuard a try.

Feedback, feature requests, and bug reports are always welcome.

Thanks for reading and supporting my first developer tool project!

Happy coding.