|
| 1 | +# Tweet 3: Code Comparison Visual Asset |
| 2 | + |
| 3 | +This visual shows the before/after transformation for Tweet 3 in the v3.9.1 campaign. |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +## Visual Asset: Side-by-Side Code Comparison |
| 8 | + |
| 9 | +### Format Options |
| 10 | + |
| 11 | +#### Option 1: Text-Based (Twitter-Native, Copy-Paste) |
| 12 | + |
| 13 | +``` |
| 14 | +❌ VULNERABLE CODE ✅ SECURE CODE |
| 15 | +
|
| 16 | +def save_config(path): from empathy_os.config |
| 17 | + with open(path, 'w') as f: import _validate_file_path |
| 18 | + json.dump(data, f) |
| 19 | + def save_config(path): |
| 20 | +⚠️ CWE-22: Path traversal validated = |
| 21 | +Attacker: ../../etc/passwd _validate_file_path(path) |
| 22 | + with validated.open('w') as f: |
| 23 | + json.dump(data, f) |
| 24 | +
|
| 25 | + ✅ 174 security tests |
| 26 | + ✅ 0 vulnerabilities |
| 27 | +``` |
| 28 | + |
| 29 | +#### Option 2: Image (For Maximum Impact) |
| 30 | + |
| 31 | +**Recommended tool**: Carbon.now.sh or similar code screenshot tool |
| 32 | + |
| 33 | +**Left Side (Red Background)**: |
| 34 | +```python |
| 35 | +# ❌ VULNERABLE CODE |
| 36 | + |
| 37 | +def save_config(user_path: str, data: dict): |
| 38 | + with open(user_path, 'w') as f: |
| 39 | + json.dump(data, f) |
| 40 | + |
| 41 | +# ⚠️ CWE-22: Path Traversal |
| 42 | +# Attacker can write to: |
| 43 | +# ../../etc/passwd |
| 44 | +# /etc/cron.d/backdoor |
| 45 | +``` |
| 46 | + |
| 47 | +**Right Side (Green Background)**: |
| 48 | +```python |
| 49 | +# ✅ SECURE CODE |
| 50 | + |
| 51 | +from empathy_os.config import _validate_file_path |
| 52 | + |
| 53 | +def save_config(user_path: str, data: dict): |
| 54 | + validated_path = _validate_file_path(user_path) |
| 55 | + with validated_path.open('w') as f: |
| 56 | + json.dump(data, f) |
| 57 | + |
| 58 | +# ✅ Blocks path traversal |
| 59 | +# ✅ Blocks null bytes |
| 60 | +# ✅ Blocks system directories |
| 61 | +# ✅ 174 security tests |
| 62 | +``` |
| 63 | + |
| 64 | +--- |
| 65 | + |
| 66 | +## Creating the Image |
| 67 | + |
| 68 | +### Using Carbon.now.sh |
| 69 | + |
| 70 | +1. Go to https://carbon.now.sh |
| 71 | +2. Use these settings: |
| 72 | + - Theme: Monokai |
| 73 | + - Background: true |
| 74 | + - Drop shadow: true |
| 75 | + - Font: Fira Code |
| 76 | + - Font size: 14px |
| 77 | + |
| 78 | +3. Create TWO images: |
| 79 | + |
| 80 | +**Image 1 (Vulnerable):** |
| 81 | +- Background color: `#2D0E0E` (dark red) |
| 82 | +- Paste the vulnerable code |
| 83 | +- Export as PNG (2x) |
| 84 | + |
| 85 | +**Image 2 (Secure):** |
| 86 | +- Background color: `#0E2D0E` (dark green) |
| 87 | +- Paste the secure code |
| 88 | +- Export as PNG (2x) |
| 89 | + |
| 90 | +4. Combine side-by-side using: |
| 91 | + - Figma (free) |
| 92 | + - Canva (free) |
| 93 | + - ImageMagick: `convert +append vulnerable.png secure.png comparison.png` |
| 94 | + |
| 95 | +### Using Figma (Recommended) |
| 96 | + |
| 97 | +**Template**: 1200x628px (Twitter optimal) |
| 98 | + |
| 99 | +**Layout**: |
| 100 | +``` |
| 101 | +┌─────────────────────────────────────────────────┐ |
| 102 | +│ ❌ VULNERABLE CODE │ ✅ SECURE CODE │ |
| 103 | +├─────────────────────┼──────────────────────────┤ |
| 104 | +│ │ │ |
| 105 | +│ [Code block with │ [Code block with │ |
| 106 | +│ red background] │ green background] │ |
| 107 | +│ │ │ |
| 108 | +│ ⚠️ CWE-22 │ ✅ 174 tests │ |
| 109 | +│ Path Traversal │ ✅ 0 vulnerabilities │ |
| 110 | +│ │ │ |
| 111 | +└─────────────────────┴──────────────────────────┘ |
| 112 | +``` |
| 113 | + |
| 114 | +**Colors**: |
| 115 | +- Vulnerable side: `#2D0E0E` background, `#FF6B6B` accent |
| 116 | +- Secure side: `#0E2D0E` background, `#6BFF6B` accent |
| 117 | +- Text: `#F8F8F2` (high contrast) |
| 118 | + |
| 119 | +--- |
| 120 | + |
| 121 | +## Alt Text (Accessibility) |
| 122 | + |
| 123 | +``` |
| 124 | +Side-by-side Python code comparison. Left shows vulnerable code with bare open() function susceptible to path traversal (CWE-22). Right shows secure code using _validate_file_path() with 174 security tests and zero vulnerabilities. |
| 125 | +``` |
| 126 | + |
| 127 | +--- |
| 128 | + |
| 129 | +## Quick Generation Script |
| 130 | + |
| 131 | +If you want to generate this programmatically: |
| 132 | + |
| 133 | +```python |
| 134 | +from PIL import Image, ImageDraw, ImageFont |
| 135 | +import textwrap |
| 136 | + |
| 137 | +def create_code_comparison(): |
| 138 | + """Create side-by-side code comparison image.""" |
| 139 | + |
| 140 | + # Image dimensions |
| 141 | + width, height = 1200, 628 |
| 142 | + img = Image.new('RGB', (width, height), color='#1A1A1A') |
| 143 | + draw = ImageDraw.Draw(img) |
| 144 | + |
| 145 | + # Try to use monospace font, fallback to default |
| 146 | + try: |
| 147 | + font = ImageFont.truetype('/System/Library/Fonts/Monaco.ttf', 14) |
| 148 | + header_font = ImageFont.truetype('/System/Library/Fonts/Monaco.ttf', 18) |
| 149 | + except: |
| 150 | + font = ImageFont.load_default() |
| 151 | + header_font = ImageFont.load_default() |
| 152 | + |
| 153 | + # Left side (vulnerable) - Red background |
| 154 | + draw.rectangle([(0, 0), (595, height)], fill='#2D0E0E') |
| 155 | + draw.text((20, 20), "❌ VULNERABLE CODE", fill='#FF6B6B', font=header_font) |
| 156 | + |
| 157 | + vulnerable_code = """def save_config(path): |
| 158 | + with open(path, 'w') as f: |
| 159 | + json.dump(data, f) |
| 160 | +
|
| 161 | +⚠️ CWE-22: Path Traversal |
| 162 | +Attacker: ../../etc/passwd""" |
| 163 | + |
| 164 | + y_offset = 60 |
| 165 | + for line in vulnerable_code.split('\n'): |
| 166 | + draw.text((20, y_offset), line, fill='#F8F8F2', font=font) |
| 167 | + y_offset += 25 |
| 168 | + |
| 169 | + # Right side (secure) - Green background |
| 170 | + draw.rectangle([(605, 0), (width, height)], fill='#0E2D0E') |
| 171 | + draw.text((625, 20), "✅ SECURE CODE", fill='#6BFF6B', font=header_font) |
| 172 | + |
| 173 | + secure_code = """from empathy_os.config |
| 174 | +import _validate_file_path |
| 175 | +
|
| 176 | +def save_config(path): |
| 177 | + validated = |
| 178 | + _validate_file_path(path) |
| 179 | + with validated.open('w') as f: |
| 180 | + json.dump(data, f) |
| 181 | +
|
| 182 | +✅ 174 security tests |
| 183 | +✅ 0 vulnerabilities""" |
| 184 | + |
| 185 | + y_offset = 60 |
| 186 | + for line in secure_code.split('\n'): |
| 187 | + draw.text((625, y_offset), line, fill='#F8F8F2', font=font) |
| 188 | + y_offset += 25 |
| 189 | + |
| 190 | + # Save |
| 191 | + img.save('docs/marketing/assets/tweet3_comparison.png') |
| 192 | + print("✅ Image created: docs/marketing/assets/tweet3_comparison.png") |
| 193 | + |
| 194 | +if __name__ == '__main__': |
| 195 | + create_code_comparison() |
| 196 | +``` |
| 197 | + |
| 198 | +**To run**: |
| 199 | +```bash |
| 200 | +pip install Pillow |
| 201 | +python scripts/create_tweet_visual.py |
| 202 | +``` |
| 203 | + |
| 204 | +--- |
| 205 | + |
| 206 | +## Fallback: Text-Only Tweet |
| 207 | + |
| 208 | +If you don't have time to create an image, the text-based comparison above works great on Twitter. The emoji visual hierarchy (❌/✅) makes it scannable even without an image. |
| 209 | + |
| 210 | +**Usage in Tweet 3**: |
| 211 | +Post the text comparison as a reply to your own Tweet 3, or include it in an attached image using Twitter's text tweet screenshot feature. |
| 212 | + |
| 213 | +--- |
| 214 | + |
| 215 | +## Image Upload Tips |
| 216 | + |
| 217 | +1. **Upload as media**, not as a link (better preview) |
| 218 | +2. **Add alt text** for accessibility |
| 219 | +3. **Preview on mobile** before posting (most users see mobile first) |
| 220 | +4. **Test contrast** - dark mode vs light mode |
| 221 | +5. **Keep text large** - Twitter compresses images |
| 222 | + |
| 223 | +--- |
| 224 | + |
| 225 | +**Status**: Template ready |
| 226 | +**Recommended**: Use Carbon.now.sh for quick, professional code images |
| 227 | +**Fallback**: Text-based comparison (works great!) |
| 228 | +**Time to create**: 5-10 minutes with Carbon.now.sh |
0 commit comments