Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Multi-Site Artist Event Pages: Building Dynamic Content Infrastructure with S3, CloudFront, and Image Optimization

What Was Done

We completed a multi-phase update to the Rady Shell event microsites architecture, focusing on two primary objectives: (1) enhancing the Bob Dylan booking modal with Zelle payment QR code integration, and (2) building out the Kool & the Gang artist event page with brand-aligned imagery and functional booking workflows.

The work involved coordinating content across distributed static sites, implementing image optimization pipelines, and managing CloudFront cache invalidation across multiple subdomain distributions.

Technical Details: Bob Dylan Modal Enhancement

The Bob Dylan booking flow required integrating a QR code asset into the existing multi-step modal interface located at:

/Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/bobdylan/index.html

The modal structure uses a step-based form pattern where:

  • Step 1: Initial booking form with name, email, and quantity fields
  • Step 2: Payment method selection
  • Step 3: Payment processing with method-specific instructions

The Zelle QR code asset (sourced from booking infrastructure) was integrated into Step 1's initial form view rather than Step 3, following the principle of progressive disclosure—users see payment options immediately, reducing cognitive load and modal abandonment rates.

The QR code is positioned below the submit button with a subtle hint layout, allowing users to scan before committing their reservation. This placement recognizes that some users prefer Zelle's peer-to-peer payment model and should have visibility into that option early in the flow.

Technical Details: Kool & the Gang Artist Page Build

The Kool & the Gang microsite required comprehensive asset acquisition and optimization. The page source is located at:

/Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/koolandthegang/index.html

We followed this workflow:

1. Asset Research and Acquisition

We benchmarked existing artist pages (Bob Dylan, Black Coffee) to understand the visual pattern:

  • Band performance photography (hero/primary imagery)
  • GMA appearance or major television documentation
  • Press photos from official music industry sources

Press assets were sourced from Shore Fire Media, the band's official press representative, ensuring brand alignment and licensing compliance.

2. Image Optimization Pipeline

Downloaded assets required optimization before deployment. We used macOS native image processing:

sips -Z 1400 kg-band.jpg -o kg-band-optimized.jpg
sips -Z 1400 kg-gma.png -o kg-gma-optimized.png

The -Z flag constrains the maximum dimension (width or height) to 1400 pixels while maintaining aspect ratio. This threshold was chosen to balance:

  • Visual fidelity on modern high-DPI displays (retina screens)
  • HTTP payload size reduction (critical for the queenofsandiego.com CDN footprint)
  • Compatibility with responsive image breakpoints defined in the CSS framework

JPEG compression was maintained at default quality (75%) to preserve detail while minimizing byte transfer. PNG files were kept for graphics with transparency requirements.

Infrastructure: S3 and CloudFront Deployment

The event microsites are hosted as static content distributed across AWS infrastructure:

S3 Bucket Structure

queenofsandiego-rady-shell-events/
├── sites/bobdylan/
│   ├── index.html
│   └── assets/
│       └── images/
├── sites/koolandthegang/
│   ├── index.html
│   └── assets/
│       └── images/
│           ├── kg-band.jpg
│           ├── kg-gma.png
│           └── [additional media]
└── [additional artist sites]

Content synchronization was performed using AWS CLI:

aws s3 sync ./sites/koolandthegang s3://queenofsandiego-rady-shell-events/sites/koolandthegang/ --delete

The --delete flag ensures stale assets are removed, preventing cache pollution.

CloudFront Distribution and Cache Invalidation

Each artist microsite is served through a dedicated CloudFront distribution with subdomain routing:

  • koolandthegang.queenofsandiego.com → CloudFront distribution (specific ID from AWS console)
  • bobdylan.queenofsandiego.com → Separate CloudFront distribution

After deploying optimized images and HTML updates, cache invalidation was necessary to ensure users received updated content immediately:

aws cloudfront create-invalidation --distribution-id [DISTRIBUTION_ID] --paths "/*"

The wildcard path invalidates all CloudFront edge cache entries globally. This operation propagates across AWS edge locations within 60-90 seconds, ensuring near-instantaneous delivery of fresh content.

Why full invalidation rather than path-specific: The page HTML references images via relative paths that may be cached at different granularities across edge nodes. A full invalidation guarantees consistency across all resources without requiring manual path enumeration.

Key Architectural Decisions

Static Site Generation Over Dynamic CMS

Each artist microsite is a static HTML page rather than a database-driven application. This decision provides:

  • Performance: Zero server-side rendering latency; content is pure static assets
  • Security: No application server, no injection vectors, minimal attack surface
  • Scalability: CloudFront edge caching handles traffic spikes without origin requests
  • Cost: S3 + CloudFront is 60-80% cheaper than running EC2 + database infrastructure

Image Optimization Timing

We optimize images before S3 upload rather than relying on responsive image tags or CSS scaling. This approach:

  • Reduces HTTP payload size immediately (no client-side scaling of oversized assets)
  • Eliminates layout shift issues during image load
  • Provides deterministic file sizes for cache planning

Booking Modal Integration

The modal is embedded directly in the page HTML using vanilla JavaScript state management rather than a JavaScript framework. This minimizes bundle size and keeps the modal behavior transparent to future maintainers reviewing the HTML source.

What's Next

  • Artist page templating: Extract common page structure into a reusable template to reduce duplication across future artist microsites
  • Image CDN optimization: Implement Cloudinary or similar image transformation service to dynamically generate responsive variants without manual resizing
  • Analytics instrumentation: Add CloudFront access logs and S3 request metrics to track page performance and modal conversion rates