Skip to content

Commit dcc9afe

Browse files
zackproserzackproser
committed
Progress
1 parent ae4b1ef commit dcc9afe

File tree

4 files changed

+160
-286
lines changed

4 files changed

+160
-286
lines changed

‎src/content/blog/vibe-coding-guide/page.mdx‎

Lines changed: 104 additions & 226 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import CV from '@/components/CV'
77
import ShareButton from '@/components/ShareButton'
88
import Newsletter from '@/components/Newsletter'
99

10+
import secretsProtection from '@/images/secret-protection.webp'
11+
import vibeCodingPremium from '@/images/vibe-coding-protection.webp'
1012
import secretsHero from '@/images/vibe-coding-survival-guide.webp'
1113
import gettingGot from '@/images/getting-got.webp'
1214

@@ -21,82 +23,33 @@ export const metadata = createMetadata({
2123
image: secretsHero,
2224
})
2325

24-
<div className="not-prose my-8 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700/40 bg-gradient-to-br from-zinc-50 via-white to-zinc-100 dark:from-zinc-900 dark:via-zinc-900/70 dark:to-zinc-800 shadow-lg">
25-
<h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">What you get in this free mini-guide:</h3>
26-
<ul className="space-y-2 text-sm text-zinc-700 dark:text-zinc-300 list-none pl-0 mb-6">
27-
<li className="flex items-start"><span className="text-orange-500 mr-2 mt-1">✓</span> Plain-English intro to Git, secrets, and environment variables</li>
28-
<li className="flex items-start"><span className="text-orange-500 mr-2 mt-1">✓</span> Copy-paste snippets to lock down your first Cursor project</li>
29-
<li className="flex items-start"><span className="text-orange-500 mr-2 mt-1">✓</span> A "disaster-undo" checklist</li>
30-
</ul>
31-
<div className="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-700/40">
32-
<h4 className="font-semibold text-zinc-900 dark:text-zinc-100">
33-
Premium unlocks:
34-
</h4>
35-
<ul className="mt-2 space-y-1 text-xs text-zinc-600 dark:text-zinc-400 list-none pl-0">
36-
<li>– Cursor rules that **auto-block leaked keys** & prompt smart checkpoints</li>
37-
<li>– One-click GitGuardian + Doppler setup</li>
38-
<li>– Screencasts, CI templates, and real-world demos</li>
39-
</ul>
40-
</div>
41-
</div>
42-
43-
<Newsletter
44-
title="🚀 Get Notified When Premium Launches!"
45-
body="Join the waiting list for Vibe Coding Mastery and get an early bird discount."
46-
successMessage="You're on the list! We'll email you about Vibe Coding Mastery."
47-
position="vibe-guide-cta1"
48-
tags={['vibe-coder-premium-waitlist', 'source-vibe-guide-cta1']}
49-
className="mt-[-1rem] mb-6 not-prose"
50-
/>
51-
52-
<Image
53-
src={secretsHero}
54-
alt="Cursor IDE flagging an exposed API key"
55-
className="rounded-lg my-6"
56-
/>
57-
58-
---
59-
60-
## Table of contents
61-
62-
## Git = Save Game, Explained 💾
63-
64-
Imagine your project is a video-game world:
65-
66-
| Game vibe | Git concept | What it does |
67-
|-----------|-------------|--------------|
68-
| **Save slot** | **Commit** | Freeze the game exactly as it is so you can return any time. |
69-
| **New level / side-quest** | **Branch** (`git checkout -b cool-experiment`) | Spin up an alternate timeline that won't break the main story. |
70-
| **Cloud save** | **Remote (GitHub)** | Stores your code on the internet so teammates *and AI tools* can read or remix it. |
26+
*I've spent 13+ years securing apps at companies like Cloudflare and Pinecone. Trust me: leaking secrets hurts worse than forgetting to save your game.*
7127

72-
### Beginner loop (3 commands)
73-
74-
```bash
75-
git init # start tracking files
76-
git add . && git commit -m "save" # new save slot
77-
git push -u origin main
78-
```
28+
## Why Secrets Matter (The $500 tweet)
7929

80-
Need to try something wild?
30+
<div className="my-6 grid grid-cols-1 md:grid-cols-2 gap-6 not-prose">
31+
<div>
32+
<h3 className="text-lg font-semibold mb-2">How it Started</h3>
33+
<Tweet id="1900767509621674109" />
34+
</div>
35+
<div>
36+
<h3 className="text-lg font-semibold mb-2">How it's Going</h3>
37+
<Tweet id="1901560276488511759" />
38+
</div>
39+
</div>
40+
<figcaption>Don't end up like Leo. Learn enough to protect yourself, or buy the premium package to protect your secrets.</figcaption>
8141

82-
```bash
83-
git checkout -b shiny-idea # branch off safely
84-
# …hack away…
85-
git switch main && git merge shiny-idea
86-
```
42+
<Link href="/products/vibe-coding-mastery">
43+
<Image src={vibeCodingPremium} alt="Vibe coding premium protects you against leaking secrets" />
44+
</Link>
8745

88-
Lost in the woods?
46+
<figcaption>Premium includes a step-by-step screencast and instructions on setting up a special tool that makes it impossible for you to commit secrets to git (so you never end up like Leo).*</figcaption>
8947

90-
<div className="not-prose my-4 p-4 rounded-md border border-red-300 bg-red-50 text-red-800 dark:border-red-600/30 dark:bg-red-900/20 dark:text-red-200">
91-
<strong className="font-semibold">⚠️ CAUTION:</strong> This command will undo your current uncommitted work! It is destructive. Use only if all else fails...
92-
</div>
48+
Publishing an OpenAI key to a public repo is the software equivalent of tweeting your Amex and CVV, or strolling down Times Square throwing your credit cards at strangers' faces.
9349

94-
```bash
95-
git reset --hard HEAD~1 # jump back one save slot
96-
```
97-
> **Premium perk**: installs a pre-commit hook + LLM rules that nudge Cursor to offer a branch or checkpoint when you hit risky code changes.
50+
Attackers can crank out four‑figure bills (or worse, wipe data) before you notice the email from Stripe.
9851

99-
---
52+
<Image src={gettingGot} alt="Publishing your secrets on the public internet is the equivalent of walking through times square and throwing your credit cards at strangers" />
10053

10154
## The New Coder's Trap
10255

@@ -111,182 +64,109 @@ Cursor is still a tool for professional developers, which assumes you know thing
11164
- How Git history really works
11265
- That API keys = credit cards
11366

114-
```javascript
115-
// Premium content example (prevents disasters)
116-
"rules": {
117-
"pre-commit": {
118-
"block-secrets": {
119-
"patterns": ["sk-[a-zA-Z0-9]{24,48}"],
120-
"errorMessage": "🚨 Never commit API keys! Use .env + gitignore"
121-
}
122-
}
123-
}
124-
```
125-
12667
<Newsletter
127-
title="🚨 Prevent Costly Mistakes!"
128-
body="Sign up for Vibe Coding Mastery updates & get tools to auto-block leaked keys and simplify Git."
129-
successMessage="You're on the list! We'll email you about Vibe Coding Mastery."
130-
position="vibe-guide-mid-post"
131-
tags={['vibe-coder-premium-waitlist', 'source-vibe-guide-mid-post']}
132-
className="my-8 not-prose"
68+
title="🚨 Tools Leo Wishes He Had"
69+
body="Only 100 early-access slots. Get screencasts + leak-prevention tools before they go live."
70+
successMessage="You're on the list! We'll email you about Vibe Coding Mastery."
71+
position="vibe-guide-mid-post"
72+
tags={['vibe-coder-premium-waitlist', 'source-vibe-guide-mid-post']}
73+
className="my-8 not-prose"
13374
/>
13475

135-
## Why Secrets Matter (The $500 tweet)
136-
137-
<div className="my-6 grid grid-cols-1 md:grid-cols-2 gap-6 not-prose">
138-
<div>
139-
<h3 className="text-lg font-semibold mb-2">How it Started</h3>
140-
<Tweet id="1900767509621674109" />
141-
</div>
142-
<div>
143-
<h3 className="text-lg font-semibold mb-2">How it's Going</h3>
144-
<Tweet id="1901560276488511759" />
145-
</div>
146-
</div>
147-
<figcaption>Don't end up like Leo. Learn enough to protect yourself, or buy the premium package to protect your secrets.</figcaption>
148-
149-
Publishing an OpenAI key to a public repo is the software equivalent of tweeting your Amex and CVV, or strolling down Times Square throwing your credit cards at strangers' faces.
150-
151-
Attackers can crank out four‑figure bills (or worse, wipe data) before you notice the email from Stripe.
152-
153-
<Image src={gettingGot} alt="Publishing your secrets on the public internet is the equivalent of walking through times square and throwing your credit cards at strangers" />
154-
155-
So, I've created this free guide to help welcome the new generation of builders getting their start with AI-native tooling. [I've been shipping production code at major tech companies you've heard of](/about) for the last 13+ years,
156-
and I don't want to see anyone else get their credentials popped or apps hacked.
157-
158-
<div className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
159-
Hi, I'm Zachary. With over a decade spent building and securing software in production environments (as you can see below), I've learned a few things about keeping projects safe, especially when AI tools enter the mix.
160-
</div>
76+
## What actually counts as a secret?
16177

162-
{/* */}
163-
<div className="my-8 grid grid-cols-1 md:grid-cols-[auto,1fr] gap-x-8 gap-y-4 items-start not-prose border-t border-b border-zinc-200 dark:border-zinc-700/40 py-8">
164-
<div className="md:sticky md:top-24 max-w-[150px] mx-auto md:mx-0">
165-
<RandomPortrait width={150} height={150} />
166-
</div>
167-
<div className="prose dark:prose-invert prose-sm">
168-
<CV showHeading={false} />
169-
</div>
170-
</div>
171-
{/* */}
78+
### 🚨 Always Keep Private:
79+
- `OPENAI_API_KEY`
80+
- `DATABASE_URL` (e.g., `postgres://user:password@...`)
81+
- `AWS_ACCESS_KEY_ID`
82+
- `JWT_SECRET`
17283

173-
API keys, database URLs, JWT secrets—they're *money, access, identity*. Guard them accordingly.
84+
**If it looks like a password or unlocks paid access, it's a secret.**
17485

17586
---
17687

177-
## What actually counts as a secret?
178-
179-
| ✅ **Keep private** | 🚫 **Safe to commit** |
180-
| --- | --- |
181-
| `OPENAI_API_KEY` | Markdown/MDX content |
182-
| `DATABASE_URL` (`postgres://…`) | Static images |
183-
| `JWT_SECRET` | Unit‑test fixtures (dummy keys) |
184-
| Cloud creds (`AWS_ACCESS_KEY_ID`) | README text |
185-
186-
> **Rule of thumb:** if someone could impersonate you, delete data, or run up a bill, it's a secret.
88+
## Git = Save Game, Explained 💾
18789

188-
## 3. Secrets & Environment Variables — Baby Steps 🍼
90+
Imagine your project is a video-game world:
18991

190-
**Secret** → a password-like string that unlocks a paid API or private database.
191-
**Environment variable (.env)** → a little locked drawer your code can peek into at runtime so the secret never sits in code.
92+
| Game vibe | Git concept |
93+
|-----------|-------------|
94+
| **Save slot** | **Commit**: Freeze the game exactly as it is. |
95+
| **New level / side-quest** | **Branch**: Spin up an alternate timeline safely. |
96+
| **Cloud save** | **Remote (GitHub)**: Stores your code online for sharing. |
19297

193-
Think of .env as hiding your house key under a rock outside the door. Your code knows which rock to lift; strangers do not.
98+
### Beginner loop (shortened)
19499

195-
Quick mental checklist
196-
- Never paste a secret directly into .js / .ts files.
197-
- Keep your .env file **out of Git** so it never lands on GitHub.
198-
- Load the variable in code with process.env.OPENAI_API_KEY (Node) or framework helpers.
100+
```bash
101+
git init
102+
git add . && git commit -m "save"
103+
git push -u origin main
104+
```
199105

200-
## Install GitGuardian to Auto-Detect Leaked Secrets 🛡️
106+
Need to try something wild?
201107

202-
Before you start pushing code to GitHub, it's smart to set up a tool that will catch any secrets you accidentally commit. [GitGuardian](https://www.gitguardian.com/) scans your code for API keys and other sensitive info before it ever leaves your machine.
108+
```bash
109+
git checkout -b shiny-idea
110+
# …hack away…
111+
git switch main && git merge shiny-idea
112+
```
203113

204-
**How to install GitGuardian's CLI (`ggshield`) with Homebrew:**
114+
Lost in the woods?
205115

206-
1. Open the terminal in Cursor
207-
2. Paste and run this command:
116+
<div className="not-prose my-4 p-4 rounded-md border border-red-300 bg-red-50 text-red-800 dark:border-red-600/30 dark:bg-red-900/20 dark:text-red-200">
117+
<strong className="font-semibold">⚠️ CAUTION:</strong> This command will undo your current uncommitted work! Use only if all else fails.
118+
</div>
208119

209120
```bash
210-
brew install gitguardian/tap/ggshield
121+
git reset --hard HEAD~1
211122
```
212123

213-
Below is a quick video walkthrough of the installation process:
124+
### Git in Action:
125+
1. You break your app while adding a new feature.
126+
2. Panic? No! Run `git reset --hard HEAD~1` to revert to your last save.
127+
3. Try again on a new branch: `git checkout -b retry-feature`.
214128

215-
<video
216-
src="/videos/git-guardian-install.mp4"
217-
controls
218-
className="w-full max-w-2xl mx-auto my-6 rounded-lg border border-zinc-200 dark:border-zinc-700/40 shadow-lg"
219-
poster="/images/vibe-coding-survival-guide.webp"
220-
aria-label="Video walkthrough: Installing GitGuardian CLI with Homebrew"
221-
/>
129+
**Premium Bonus:** Screencasts walk you through real-world Git issues like fixing a botched `merge`.
222130

223-
## Your First Safe Deploy — 5-Minute Walk-through 🚀
131+
<div className="not-prose my-4 p-4 rounded-md border border-yellow-400 bg-yellow-50 text-yellow-800 dark:border-yellow-600/30 dark:bg-yellow-900/20 dark:text-yellow-200">
132+
<strong className="font-semibold">🔒 Premium Only:</strong> Get pre-commit hooks and AI-powered rules that nudge Cursor to offer branches or checkpoints.
133+
</div>
224134

225-
Follow this once, and you'll have a real-world loop you can repeat for every project.
135+
---
226136

227-
1. Init + first save slot
228-
```bash
229-
git init
230-
git add . && git commit -m "init"
231-
```
137+
## 3. Secrets & Environment Variables — Baby Steps 🍼
232138

233-
There are two ways you can create a new file when working with Cursor:
234-
1. Use Cursor: Hit Cmd+Shift+P to bring up the command pallete then select Cursor → New File → .env
235-
2. Run the touch command in your terminal from the root of your project:
139+
**Secret** → a password-like string that unlocks a paid API or private database.
140+
**Environment variable (.env)** → a locked drawer your code can peek into at runtime so secrets don't sit in code.
236141

237-
```bash
238-
touch .env
239-
```
142+
Think of .env as hiding your house key under a rock outside the door. Your code knows which rock to lift; strangers do not.
240143

241-
Next, open the .env file for editing. You should put all of your secrets, API keys, database access strings in here:
242-
```bash
243-
OPENAI_API_KEY="sk-live-…"
244-
DATABASE_URL="postgres://…"
245-
```
144+
Quick checklist:
145+
- 🚫 Never paste a secret directly into .js or .ts files.
146+
- 📁 Keep your .env file **out of Git** so it never lands on GitHub.
147+
- 🧑‍💻 Load the variable in code with `process.env.OPENAI_API_KEY` (Node) or framework helpers.
246148

149+
### 💡 Try This (Free):
150+
Run `git add . && git commit -m "test"` to save your code.
247151

248-
2. Create the secrets drawer
152+
**Premium Bonus:** Watch the screencast to see how Cursor's AI suggests commit messages *before* you type them.
249153

250-
```bash
251-
# .env
252-
OPENAI_API_KEY="sk-live-…"
253-
DATABASE_URL="postgres://…"
254-
```bash
255-
echo ".env" >> .gitignore
256-
```
154+
---
257155

258-
3. Push to GitHub (cloud save)
259-
```bash
260-
gh repo create my-app --public # GitHub CLI, or create via UI
261-
git push -u origin main
262-
```
156+
## 🎥 What's in Premium?
263157

264-
4. Import to Vercel
265-
Vercel → "Add New Project" → pick your repo → Environment Variables tab → paste the same keys.
266-
267-
5. Deploy & verify
268-
Test your application in production
269-
270-
<div className="not-prose my-8 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700/40 bg-gradient-to-br from-zinc-50 via-white to-zinc-100 dark:from-zinc-900 dark:via-zinc-900/70 dark:to-zinc-800 shadow-lg">
271-
<h4 className="text-md font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
272-
Premium Version includes a deployment assistant tool that:
273-
</h4>
274-
<ul className="space-y-2 text-sm text-zinc-700 dark:text-zinc-300 list-none pl-0">
275-
<li className="flex items-start"><span className="text-orange-500 mr-2 mt-1">✓</span> Examines your project</li>
276-
<li className="flex items-start"><span className="text-orange-500 mr-2 mt-1">✓</span> Gets everything ready for production</li>
277-
<li className="flex items-start"><span className="text-orange-500 mr-2 mt-1">✓</span> Ensures no secrets will be leaked</li>
278-
<li className="flex items-start"><span className="text-orange-500 mr-2 mt-1">✓</span> Helps you deploy to production</li>
279-
</ul>
280-
</div>
158+
- **Screencasts:** Watch me debug a secret leak in real-time.
159+
- **Cursor Rules:** See how AI nudges you to safer commits.
160+
- **Templates:** Copy-paste CI/CD configs that block leaks automatically.
281161

282-
<Newsletter
283-
title="🚀 Get the Deployment Assistant!"
284-
body="Join the waiting list for Vibe Coding Mastery and be the first to access the deployment assistant."
285-
successMessage="You're on the list! We'll email you about Vibe Coding Mastery."
286-
position="vibe-guide-cta2"
287-
tags={['vibe-coder-premium-waitlist', 'source-vibe-guide-cta2']}
288-
className="mt-[-1rem] mb-6 not-prose"
289-
/>
162+
<Link href="/products/vibe-coding-mastery">
163+
<img src="https://via.placeholder.com/600x300?text=Premium+Only:+Real-time+Secret+Scanning" alt="Premium only: GitGuardian blocking a leaked API key" />
164+
</Link>
165+
*Premium unlocks screencasts and tools that auto-block leaks before they happen.*
166+
167+
[Join Waitlist for Early Access](/contact)
168+
169+
---
290170

291171
<div className="mt-16 mb-16 text-center not-prose">
292172
<h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
@@ -298,17 +178,15 @@ Test your application in production
298178
<ShareButton />
299179
</div>
300180

301-
## Buzzword Decoder — One-Page Glossary 📖
302-
303-
| Term | What it really means |
304-
|-----------------------|----------------------------------------------------------------------------|
305-
| **Commit** | A "save slot" snapshot of your code. |
306-
| **Branch** | A parallel timeline for experiments. |
307-
| **Remote** | A copy of your repo on GitHub, GitLab, etc. |
308-
| **Secret** | Any token or password that costs money or grants access. |
309-
| **Environment variable** | A key–value pair the OS hands to your app at runtime (`process.env.*`). |
310-
| **`.env` file** | Local text file that stores secrets; should stay off GitHub. |
311-
| **Rotate a key** | Revoke the old secret and issue a new one. |
312-
| **Force-push** | Overwrite history on the remote—use only after scrubbing leaked secrets. |
313-
| **Preview deploy** | Temporary URL auto-built from a feature branch. |
314-
| **CI / CD** | Robots that test ("CI") and ship ("CD") your code whenever you push. |
181+
---
182+
183+
## Survival Terms 📖
184+
185+
| Term | What it really means + Risk |
186+
|-------------|-------------------------------------------------|
187+
| **Commit** | A save point for your project. Lose it? You're stuck debugging blind. |
188+
| **Branch** | A parallel timeline to test changes safely. Without one, bugs hit your live project. |
189+
| **Remote** | A GitHub copy of your project. Push unsafe code here? It becomes public. |
190+
| **Secret** | API keys, DB URLs — anything that costs money or gives access. Leak it, pay for it. |
191+
192+
---

0 commit comments

Comments
 (0)