Skip to content

README.md

Latest commit

 

History

History
304 lines (215 loc) · 10.5 KB

README.md

File metadata and controls

304 lines (215 loc) · 10.5 KB

NYC Masterclass 2026 - Lab Guide

Duration: 3 hours 15 minutes (9:15 AM – 12:30 PM, including 15-minute break)

Theme: Build pages and features for a Masterclass event series that can scale to future meetup sites.

Agenda

Time Activity
9:15 AM Introduction – EDS overview, architecture, lab objectives
9:30 AM Exercise 1 – Authoring Your First Page
9:50 AM Exercise 2 – Block Development (variations)
10:10 AM Exercise 3 – Dynamic Cards with Data Sources
10:35 AM Exercise 4 – Extend Search Block from Block Collection
10:55 AM Exercise 5 – JSON2HTML Generate Pages from Data
11:20–11:35 AM Break (15 min)
11:35 AM Exercise 6 – Form Submissions with Workers
11:55 AM Exercise 7 – DA.live Plugin Development
12:25 PM Exercise 8 – Repoless Multi-Site & Multi-Brand
12:30 PM End

Sessions start at 9:15 AM; 15-minute break 11:20–11:35 AM; lab ends at 12:30 PM.

Lab Narrative

Welcome to the NYC Masterclass 2026 hands-on lab. Through practical exercises, you'll learn how to build fast, maintainable websites with Adobe Edge Delivery Services (EDS) and DA.live.

The journey:

  1. Start as an author creating content
  2. Become a developer building blocks
  3. Integrate dynamic data from external sources
  4. Scale to enterprise multi-site architecture

What makes EDS different:

  • Document-based authoring (Word/Google Docs)
  • No build steps, no frameworks
  • 100 Lighthouse scores by default
  • Microservices architecture
  • API-first approach

By the end of this lab, you'll understand how to build production-ready websites that are fast, maintainable, and author-friendly.

Before You Begin

Complete setup: SETUP.md — Git, development environment, access verification.

Solutions: Complete solutions for all exercises are on the answers branch. Each exercise links to it in its Solution section.

Your environment:

Session 1: Core Concepts (2 hours 5 minutes)

Introduction (15 mins): EDS overview, architecture, lab objectives

Exercise 1 (20 mins): Authoring Your First Page

What you'll learn:

  • Document semantics and block structure
  • DA.live authoring workflow
  • Preview and publish pipeline
  • Inspecting content in multiple formats (.md, .plain.html, View document source)

What you'll build:

  • Session or Lab page with Hero block and metadata
  • Understanding how sections and blocks are structured
  • Personal workspace setup (jsmith naming convention)

Key takeaway: Understanding document semantics is fundamental. Inspect content in different formats to see how EDS transforms authored content into rendered HTML.

Exercise 2 (20 mins): Block Development - Enhancements & Variations

What you'll learn:

  • Block decoration lifecycle and decorate(block) entrypoint
  • Block enhancements (eyebrow from <em>) vs variations (list, view switcher)
  • Mobile-first responsive CSS and CSS scoping

What you'll build:

  • Eyebrow enhancement for Cards block (italic text → label)
  • List variation (single-column layout)
  • View Switcher variation (Grid/List toggle)

Key takeaway: One block codebase supports enhancements (content patterns) and variations (layout classes). Test on desktop and mobile with Chrome DevTools responsive view.

Exercise 3 (25 mins): Dynamic Cards with Data Sources

What you'll learn:

  • How Sheets convert to JSON endpoints
  • Fetching data from external sources
  • Async/await patterns and error handling
  • Safe personal data approach to avoid conflicts

What you'll build:

  • Dynamic Cards block that fetches speaker data from your personal workspace
  • Copy speakers.json to /drafts/jsmith/ and add your own data
  • Loading and error states
  • Populate the /speakers page

Key takeaway: Dynamic blocks fetch data instead of decorating authored content. Working with personal data in drafts prevents conflicts with other participants.

Exercise 4 (20 mins): Extend Search Block from Block Collection

What you'll learn:

  • How query-index.json works as a search data source
  • Block composition — reusing the Cards block inside Search
  • Building a live search UI with fetch + filter + render
  • Using loadCSS for runtime stylesheet loading
  • DA.live publish workflow for making pages discoverable

What you'll build:

  • Search block that fetches and filters query-index.json
  • Results rendered using the Cards block (block composition pattern)
  • Publish your own page to /labs/jsmith/ and find it via search

Key takeaway: Block composition lets blocks reuse each other's rendering logic. Query index enables client-side search with zero backend infrastructure.

Exercise 5 (25 mins): JSON2HTML - Generate Pages from Data

What you'll learn:

  • JSON2HTML worker service for dynamic page generation
  • Creating Mustache templates for repeatable content
  • Configuring JSON2HTML via Admin Edit tool
  • Testing templates with JSON2HTML Simulator

What you'll build:

  • Multi-city event pages from future-events.json Sheet
  • Mustache template in DA.live
  • JSON2HTML worker configuration
  • Dynamic pages for Sydney, London, Bangalore, Berlin, Singapore, Dubai

Key takeaway: JSON2HTML worker transforms JSON data into HTML pages via templates. One Sheet + one template = unlimited event pages.

Break (15 mins) — 11:20–11:35 AM

Session 2: Advanced Topics (1 hour 30 minutes)

Exercise 6 (20 mins): Form Submissions with Workers

What you'll learn:

  • Building forms in EDS blocks
  • Handling form submissions with JavaScript
  • Worker middleware for external integrations
  • Providing user feedback during async operations

What you'll build:

  • Feedback form block with client-side validation
  • Integration with Cloudflare Worker
  • Slack webhook connection to post submissions

Key takeaway: Workers provide secure middleware for forms. Keep API keys server-side, validate data, integrate with external services.

Exercise 7 (30 mins): DA.live Plugin Development

What you'll learn:

  • How DA.live plugins work as library integrations (DA App SDK)
  • Plugin architecture (HTML + JS in iframe, PostMessage)
  • Developing plugins locally and deploying to your branch
  • Inserting content into documents via SDK actions

What you'll build:

  • EmbedWidget plugin (paste TradingView embed → structured block)
  • TradingView block decorator to render the widget on the page
  • Plugin accessible from library palette with ?ref=local or ?ref=jsmith

Key takeaway: Plugins let authors use familiar paste workflows while keeping only block markup in the document. One plugin, reusable across pages.

Exercise 8 (30 mins): Repoless Multi-Site & Multi-Brand

What you'll learn:

  • Repoless architecture in EDS
  • Sharing code across multiple sites
  • Using Site Admin tool to configure code sources
  • Verifying repoless setup with DevTools

What you'll build:

  • Your own DA.live project (cloudadoption/jsmith-mc)
  • Configure code source to point to shared nycmasterclass codebase
  • Create custom content pages with shared styling
  • Prove code independence using browser DevTools

Key takeaway: Repoless enables launching unlimited sites with shared code. Create your own site in minutes, leverage existing codebase, maintain content independence.

Go-Live Discussion (10 mins): Production readiness checklist

Exercise Flow

Each exercise builds on previous concepts:

Exercises 1-2: Foundation

  • Author perspective -> Developer perspective
  • Static content -> Decorated blocks

Exercises 3-4: Data Integration

  • External data (Sheets/personal workspace) -> Internal data (query index)
  • API-first architecture in practice
  • Dynamic data fetch -> Block composition (Search reuses Cards)

Exercise 5: Content Scale

  • Manual pages -> Worker-generated pages
  • JSON2HTML service: Data + Mustache templates = Unlimited pages

Exercises 6-7: Real-World Integrations

  • Forms → Worker → Slack; Plugins → paste embed → block content

Exercise 8: Enterprise Scale

  • Single site -> Multi-site architecture (hands-on repoless setup)

Key Concepts

Separation of Concerns:

  • DA.live = Authoring
  • EDS = Delivery
  • Workers = Middleware

API-First:

  • Every resource has a JSON representation
  • DA.live API for content management
  • EDS Admin API for preview/publish

Performance by Default:

  • No frameworks, vanilla JavaScript
  • Automatic image optimization
  • Progressive loading (eager/lazy/delayed)

Author-Friendly:

  • Document-based authoring
  • Blocks for reusable components
  • Metadata for SEO control

Resources

Solutions: answers branch — complete solutions for all lab exercises.

Documentation:

Tools:

APIs:

Troubleshooting

Dev server issues: See SETUP.md Permission errors: Verify IMS group membership, re-login to DA.live Pages not indexing: Check published to .aem.live, wait 5-10 minutes Blocks not loading: Check browser console, verify file paths

After the Lab