Colophon

Last updated August 4, 2025.

A detailed look at the technology, design decisions, and principles behind this website.

Technology Stack

Static Site Generator

This site is built with Eleventy (11ty), chosen for its:

• Flexibility with multiple templating languages
• Excellent performance and build speeds
• Active, supportive community
• Zero-client-JavaScript by default
• Respect for web standards

Templating & Data

• Nunjucks for templating
• Markdown for content authoring
• JSON and JavaScript for data files
• YAML frontmatter for page metadata

Search Functionality

• Pagefind for static site search
• Client-side search with no external dependencies
• Privacy-first - all search happens locally
• Lightweight - ~10KB JavaScript when active
• Offline capable once loaded
• Automatic indexing during build process
• Excludes navigation and footer for focused results

Hosting & Deployment

• Cloudflare Workers & Pages for hosting and continuous deployment
• Git-based workflow with automatic builds on commit
• Branch previews for testing changes before they go live
• Global CDN through Cloudflare's edge network
• Custom domain registered through Hover

Performance & Optimization

• No client-side JavaScript (unless absolutely necessary)
• Responsive images with multiple formats and sizes
• Critical CSS inlined for faster first paint
• Progressive enhancement philosophy
• Lighthouse score: 100/100/100/100 (Performance/Accessibility/Best Practices/SEO)

Design Philosophy

Accessibility First

Every design decision prioritizes accessibility:

• WCAG 2.1 AA compliance as a minimum standard
• Semantic HTML throughout
• High contrast ratios (7:1 or better)
• Keyboard navigation support
• Screen reader optimization
• No motion for users who prefer reduced motion

Progressive Enhancement

The site works without JavaScript, CSS, or images:

1. HTML foundation: Semantic, accessible markup
2. CSS enhancement: Visual design and layout
3. JavaScript sparingly: Only when truly beneficial
4. Image optimization: Performance without sacrificing quality

Typography & Readability

• System fonts for maximum performance and consistency
• Optimal line lengths (45-75 characters)
• Generous white space for improved readability
• Consistent vertical rhythm
• Dark mode support respecting user preferences

Content Strategy

Writing Approach

• Plain language over jargon
• Conversational tone while maintaining professionalism
• Clear structure with helpful headings and navigation
• Links that provide context (no "click here")

Information Architecture

• Logical navigation hierarchy
• Consistent page layouts
• Clear calls-to-action
• Multiple ways to find content (tags, categories, full-text search)

Privacy & Ethics

• No tracking scripts or analytics that compromise privacy
• Minimal external dependencies
• Transparent affiliate link policy
• No dark patterns or manipulative design

Development Practices

Code Quality

• Semantic HTML5 markup
• Modern CSS with custom properties and logical properties
• ES6+ JavaScript when needed
• Consistent formatting with Prettier
• Version control with meaningful commit messages

Performance Budget

• No external JavaScript frameworks unless absolutely necessary
• Optimized images with appropriate formats (WebP, AVIF when supported)
• Minimal CSS focused on what's actually used
• Fast loading times on all connection speeds

Testing & Validation

• HTML validation through W3C Validator
• CSS validation for standards compliance
• Accessibility testing with screen readers and automated tools
• Cross-browser testing on major browsers
• Mobile-first responsive design

Content Management

Writing Workflow

1. Draft in Markdown with clear frontmatter
2. Local development with live reload
3. Git commits with descriptive messages
4. Branch previews for review
5. Deploy to production after testing

Asset Management

• Images optimized for web before upload
• Alt text required for all images
• Responsive image sets for different screen sizes
• Version control for all assets

Maintenance Schedule

• Monthly dependency updates for security
• Quarterly accessibility audits
• Regular content reviews for accuracy
• Annual design review for improvements

Design Inspiration

Visual Design

• Brutalist web design movement
• Swiss typography traditions
• Print design principles applied to web
• High contrast, minimal color palettes

UX Philosophy

• Don't make me think (Steve Krug)
• Progressive disclosure of information
• User control over experience (dark mode, reduced motion)
• Inclusive design principles

Tools & Environment

Development Environment

• VS Code with relevant extensions
• Terminal for command line operations
• Git for version control
• Node.js for build tools

Design Tools

• Figma for design mockups (when needed)
• Browser DevTools for design iteration
• Lighthouse for performance auditing
• axe DevTools for accessibility testing

Writing Tools

• Markdown for content
• Grammarly for editing assistance
• Hemingway Editor for clarity
• System spell check for basic errors

Hosting Details

Infrastructure

• Static hosting via Cloudflare Workers & Pages for maximum speed and security
• Global CDN with edge caching for fast worldwide access
• HTTPS everywhere with automatic certificates
• Custom domain registered through Hover with DNS managed by Cloudflare

Backup & Recovery

• Private Git repository serves as primary backup
• Cloudflare Pages deployment logs for debugging
• Local development environment as secondary backup
• Markdown source files easily portable

Environmental Impact

Green Web Practices

• Static site generation for minimal server resources
• Optimized assets to reduce data transfer
• No unnecessary JavaScript to save device battery
• Cloudflare's green energy commitment for sustainable hosting

Sustainable Development

• Long-term maintainable code
• Standards-based development for longevity
• Minimal dependencies to reduce update burden
• Documentation for future maintainers

Inspiration & Credits

Technical Inspiration

• Eleventy community for excellent documentation and examples
• CSS Grid Garden for layout understanding
• A11y Project for accessibility guidance
• Web.dev for performance best practices

Design Inspiration

• Derek Sivers for content strategy and simplicity
• Dan Luu for performance-focused design
• Heydon Pickering for inclusive design principles
• Jeremy Keith for progressive enhancement philosophy

Site Statistics

Performance Metrics

• Page load time: < 1 second on 3G
• First Contentful Paint: < 1.5 seconds
• Largest Contentful Paint: < 2.5 seconds
• Cumulative Layout Shift: < 0.1

File Sizes

• HTML: ~15-30KB per page
• CSS: ~8KB total
• JavaScript: ~10KB (search functionality only)
• Images: Optimized per usage

Version History

Current Version (2025)

• Eleventy v3.x with ES modules
• Modern CSS with logical properties
• Improved accessibility throughout
• Enhanced content strategy

Previous Versions

• v2 (2024): Major redesign with focus on simplicity
• v1 (2023): Initial Eleventy migration from previous platform

Contact & Feedback

Found an issue? Have a suggestion? I'd love to hear from you:

• Contact form for general inquiries
• Email for direct feedback

License & Usage

Content License

• Blog posts and personal content: © Mathew Brown, All rights reserved
• Code examples in posts: MIT License unless otherwise noted

Code License

• Site source code: MIT License
• Source code: Private GitHub repository