PunchCard Studio 🥊

Visualize your code as IBM punched cards - a nostalgic journey through computing history.

Transform your modern code into authentic punched card visualizations, complete with historical constraints and educational features. Experience programming the way it was done in the golden age of computing!

✨ Features

🎯 Real-Time Visualization

• Live Preview: See your code instantly transformed into punched cards as you type
• Authentic IBM 029 Encoding: Historically accurate hole patterns and character mapping
• Multiple Card Colors: Choose from manila, white, blue, pink, and green card styles
• Smooth Scrolling: Navigate through large files with ease

📏 Historical Constraints

• 80-Character Limit: Visual warnings when lines exceed the historical 80-character limit
• Real-Time Feedback: Instant display of line violations and card statistics

🏛️ Historical Language Formats

• FORTRAN: Classic scientific computing format with column-based layout
• COBOL: Business programming format with structured divisions
• Assembly: Low-level instruction format with opcode highlighting
• Modern: Standard format for contemporary programming languages

📊 Statistics & Insights

• Card Count: See how many physical cards your code would require
• Character Analysis: Track total characters and line violations
• Real-time Updates: Statistics update as you type

💾 Export Capabilities

• TXT Format: ASCII art punch cards in plain text format
• HTML Format: Styled web pages with authentic card appearance
• Automatic Naming: Files named with timestamps for easy organization
• VS Code Integration: Built-in save dialogs and file management

🎓 Educational Content

• Historical Context: Learn about the punch card era (1890s-1980s)
• Character Encoding: Understand IBM 029 keypunch encoding
• Interactive Learning: See how different languages would have looked on cards

🚀 Getting Started

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "PunchCard Studio"
4. Click Install

Quick Start

1. Open a file in VS Code (try the included sample files!)
2. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
3. Run command: PunchCard Studio: Show Preview
4. View your code as punched cards in the preview panel!
5. Use the dropdown menus to change card colors and language formats

📖 Usage Guide

Basic Operations

Opening the Preview

• Command Palette: PunchCard Studio: Show Preview
• Explorer Panel: Look for "PunchCard Preview" in the sidebar
• Auto-open: Enable in settings to automatically show preview for new files

Switching Language Formats

• Command Palette: PunchCard Studio: Switch Language Format
• Preview Controls: Use the dropdown in the preview panel
• Supported Formats: Modern, FORTRAN, COBOL, Assembly

Enabling Punch Card Mode

• Command Palette: PunchCard Studio: Toggle Punch Card Mode
• Effect: Prevents typing beyond 80 characters
• Visual Feedback: Status bar shows mode and card count

Advanced Features

Customizing Appearance

Access settings via File → Preferences → Settings, then search for "PunchCard Studio":

• Card Color: Choose from 5 authentic card colors
• Show Warnings: Toggle 80-character violation indicators

Exporting Cards

1. Click Export Buttons: Use "Export TXT" or "Export HTML" in the preview panel
2. Choose Save Location: VS Code save dialog opens automatically
3. Automatic Naming: Files are named with timestamps (e.g., punchcards-2025-11-07T15-45-23.txt)
4. Open Exported File: Click "Open File" in the success notification

Available Settings

• Card Color: Choose from manila, white, blue, pink, or green cards
• Language Format: Set your preferred historical format (FORTRAN, COBOL, Assembly, Modern)
• Show Warnings: Enable/disable 80-character limit warnings
• Auto Open Preview: Automatically show preview when opening files

⚙️ Configuration

Settings Reference

Example Configuration

{
  "punchcardStudio.cardColor": "blue",
  "punchcardStudio.renderMode": "simplified",
  "punchcardStudio.showWarnings": true,
  "punchcardStudio.defaultLanguageFormat": "fortran",
  "punchcardStudio.autoOpenPreview": true
}

🎯 Use Cases

Educational

• Computer Science Courses: Teach students about computing history
• Programming Workshops: Demonstrate evolution of programming practices
• Historical Presentations: Create authentic visuals for talks about computing history

Professional

• Code Reviews: Enforce line length standards in a fun way
• Team Challenges: Compete to write the most efficient code (fewest cards)
• Documentation: Create unique visuals for technical documentation

Personal

• Coding Practice: Challenge yourself with historical constraints
• Nostalgia: Experience programming as it was done decades ago
• Art Projects: Create punched card art from your favorite code snippets

🔧 Keyboard Shortcuts

Tip: Assign custom keyboard shortcuts via File → Preferences → Keyboard Shortcuts

📤 Export Formats

TXT Format

• Plain text with ASCII art punch card representation
• Complete hole patterns using 'x' marks
• Line numbers and original code
• Perfect for sharing via email, documentation, or printing

HTML Format

• Styled web page with authentic card colors
• Professional header with metadata
• Responsive design for all screen sizes
• Ideal for presentations and web sharing

🏗️ Technical Details

Performance

• Optimized Rendering: Minimal JavaScript for fast display
• Efficient Encoding: Direct character-to-hole mapping
• Smooth Scrolling: Handles large files without lag
• Instant Updates: Real-time preview as you type

Compatibility

• VS Code Version: 1.85.0 or higher
• Language Support: Works with any text-based programming language
• Platform Support: Windows, macOS, Linux
• File Types: All text files (.txt, .py, .js, .f, .cob, .asm, etc.)

Architecture

• Extension Host: TypeScript-based VS Code extension
• Webview UI: Vanilla JavaScript for maximum performance
• Encoding Engine: IBM 029 Hollerith encoding implementation
• Export System: Built-in TXT and HTML generation

🎯 Sample Files Included

The extension comes with ready-to-try examples:

• test-fortran.f - Classic FORTRAN scientific program
• test-python.py - Modern Python with functions and loops
• test-javascript.js - JavaScript with ES6+ features
• test-cobol.cob - Traditional COBOL business program
• test-assembly.asm - Assembly language instructions
• test-c.c - C program with arrays and functions

Open any of these files and see how different programming languages would have looked on IBM punch cards!

🐛 Known Issues

• Very large files (>1000 lines) may render slowly
• Some Unicode characters may not have IBM 029 equivalents
• Export requires sufficient disk space for generated files

💡 Future Enhancements

• Animated card punching effects
• Audio feedback (keypunch sounds)
• Batch file processing
• Custom card templates
• Additional historical computer formats

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• IBM for the original punched card technology that revolutionized computing
• The Computer History Museum for preserving computing heritage
• VS Code team for the excellent extension API
• All the programmers who worked with punch cards in the golden age of computing

📞 Support

• Issues: GitHub Issues
• Email: pavel.likhovid@gmail.com

Made with ❤️ for computing history enthusiasts and modern developers alike.

Experience the golden age of computing, one punched card at a time.

Version 1.0.9 - November 2025