Colophon

Last updated July 17, 2026.

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 across the codebase.
• 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

• Automated dependency updates via GitHub Dependabot.
• 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

• Emacs for editing.
• Terminal for command line operations.
• Git for version control.
• Node.js for build tools.

Design Tools

• Browser DevTools for design iteration.
• Lighthouse for performance auditing.
• axe DevTools for accessibility testing.

Writing Tools

• Markdown for content.
• System spell check for basic errors.
• Vale as an open-source, self-hosted prose linter — runs advisory-only in a pre-commit hook to surface wordiness, passive voice, and weasel words. It never blocks a commit; I still decide what to change.

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

• 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 (2026)

• 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.

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: GitHub repository.