CODING WITH AI!

Generate better code with SPEC, debug efficiently, and stay secure

Comic Strip 1: The SPEC Framework

Vague prompts get you vague code. Use SPEC to generate exactly what you need:

  • Specific: What exactly should it do?
  • Platform: What language/version/libraries?
  • Examples: Show input/output samples
  • Constraints: What are the rules and limits?

Bad Prompt

"Write a login function"

Result: Generic code that doesn't fit your needs

Good SPEC Prompt

S: Validate user registration with username, email, password

P: Python 3.11, only 're' library for regex

E: Input: {'username': 'ab', 'email': 'invalid'} → Output: (False, ['Username too short', 'Invalid email'])

C: Username 3-20 chars, valid email, password 8+ chars with uppercase+lowercase+number

SPEC Builder Interactive

Build your prompt section by section and watch the completeness score!

0%

S - Specific (What exactly?) ▼

"Validate users" (bad) vs "Validate user registration data including username, email, and password" (good)

P - Platform (Language/Version/Libraries) ▼

"Python" (bad) vs "Python 3.11, no external libraries except 're' for regex" (good)

E - Examples (Input/Output) ▼

Show concrete test cases: Input: {'username': 'ab'} → Output: (False, ['Username too short (min 3)'])

C - Constraints (Rules/Limits) ▼

Define all validation rules: Username 3-20 chars alphanumeric, Email standard format, Password 8+ with upper+lower+number

Submit Your SPEC Prompt

Use the SPEC framework to write a prompt for code you actually need. Fill out all 4 sections.

Comic Strip 2: Debug Like You Mean It

AI can help debug, but only if you give it what it needs. Use the 4-Step Template:

4-Step Debugging Template

1. Problem (One specific sentence)

"It's broken" (bad) vs "Function returns None instead of calculated average" (good)

2. Expected vs Actual

Expected: Returns float average of list
Actual: Returns None

3. Minimal Code (Only relevant parts)

Just the function + test case, not 500 lines of unrelated code

4. What You Tried

Checked if list is empty
Added print statements
Tested with simple data

Debug Template Builder

Fill out the 4-step template for your debugging challenge:

Submit Your Debug Prompt

Use the 4-step template to debug actual code you're stuck on. Fill out all 4 sections.

Comic Strip 3: Security - The 5 Non-Negotiables

AI generates code fast. But it also generates vulnerabilities. Run these 5 checks EVERY TIME:

The 5 Security Checks

1. SQL Injection - Use Parameterized Queries
Vulnerable:
f"SELECT * FROM users WHERE name = '{username}'"
Safe:
cursor.execute("SELECT * FROM users WHERE name = ?", (username,))
2. Hardcoded Secrets - Use Environment Variables
Vulnerable:
API_KEY = "sk_live_1234abcd"
Safe:
API_KEY = os.getenv("API_KEY")
3. Input Validation - Never Trust User Input
Vulnerable:
email = request.form['email']
# immediately use it
Safe:
email = request.form['email']
if validate_email(email):
  # then use it
4. XSS Protection - Escape Output, Sanitize HTML
Vulnerable:
f"<div>{user_comment}</div>"
Safe:
f"<div>{escape(user_comment)}</div>"
5. Auth/Authorization - Verify Who Can Access What
Vulnerable:
@app.route('/admin')
def admin():
  # no checks
Safe:
@app.route('/admin')
@login_required
@admin_required
def admin():

Security Bug Hunter Game

Click on lines you think are vulnerable. Find all 5 security issues!

Found: 0/5 vulnerabilities
1: from flask import Flask, request
2: API_KEY = "sk_live_abc123xyz" # API key for payments
3: app = Flask(__name__)
4:
5: @app.route('/admin/delete_user')
6: def delete_user():
7:     user_id = request.args.get('id')
8:     db.execute(f"DELETE FROM users WHERE id = {user_id}")
9:     return "User deleted"
10:
11: @app.route('/comment')
12: def post_comment():
13:     comment = request.form['comment']
14:     return f"<div>{comment}</div>"

Submit Your Security Analysis

Paste code (yours or AI-generated). Run through the 5-point security checklist. List any vulnerabilities you found and how to fix them.

Page 1 of 3
← Previous Lesson Next Lesson →