Project report

Project Name

A one-line description of what was built

Explain the experiment in two or three sentences — what problem it pokes at, what you tried, and what you learned along the way.

Live demo Source code

Today’s agenda

  1. The problemWhy this was worth an afternoon
  2. The buildStack, architecture, the interesting code
  3. ResultsNumbers, screenshots, surprises
  4. What’s nextOpen questions and follow-ups
01

The problem

A short framing sentence that sets up this part of the talk.

About the project

Passionate, plain-language summary of the idea. Keep it to two or three lines so the slide breathes.

Problem first
Measurable
Small codebase
Learned a lot
Fast
Fun to build

Why it matters

  • Point oneSupporting detail in a single sentence.
  • Point twoAnother detail — use code for identifiers.
  • Point threeKeep to three or four bullets per slide.
Context

Side note card

Use a card for a definition, a constraint, or the one thing the audience should remember.

Stack & tools

TypeScript
Workers
D1
Claude
Git
More

Tiles take any icon from theme/icons.svg. Set --cols on .tiles to change the grid; add hot to highlight one.

How it works

01

Collect

Gather the raw inputs.

02

Transform

Clean and reshape.

03

Reason

Ask the model.

04

Ship

Deploy to the edge.

05

Measure

Watch and iterate.

The interesting bit

Explain the one idea in the code that makes it work. Highlight the key line.

  • Tokens: .k .s .c .f .n
  • Wrap a line in .hl-line
export default {
  async fetch(req, env) {
    const url = new URL(req.url);
    // cache the expensive call at the edge
    const hit = await env.KV.get(url.pathname);
    if (hit) return new Response(hit);

    const body = await render(url, env);
    await env.KV.put(url.pathname, body, { ttl: 3600 });
    return new Response(body);
  },
};
App screenshot

What it looks like

  1. Landing viewSwap the placeholder for a real PNG/WebP screenshot.
  2. FramesUse .browser, .monitor > .screen or .phone.
  3. CalloutsNumbered notes that walk through the UI.

Selected experiments

View all

Dashboard

One-line description of the experiment and its outcome.

  • Workers
  • D1
  • Charts

Web app

One-line description of the experiment and its outcome.

  • TypeScript
  • Hono

Mobile

One-line description of the experiment and its outcome.

  • SwiftUI
  • Claude API

By the numbers

42ms
p95 latency

Down from 310 ms before caching.

7.4×
Faster

The headline number gets the orange tile.

380
Lines of code

Small enough to read in one sitting.

Latency by version

v1310 v2210 v3105 v442

p95, milliseconds

Charts are plain inline SVG: .bar, .bar.hot, .axis, .val. Bar height = value × scale.

How it evolved

Week 1

Prototype

Notebook

Proved the idea worked on a toy dataset.

Week 2

Rewrite

Worker + D1

Moved to the edge, added caching and tests.

Week 3

Launch

Production

Shipped, measured, wrote these slides.

TipBadges take any icon; dashed connectors are drawn automatically.

Before & after

Before

  • Manual, copy-paste workflow
  • 310 ms p95 latency
  • Breaks when the API changes

After

  • One command, fully automated
  • 42 ms p95 latency
  • Typed, tested, cached
Make it work, make it right, then make it fast.
Kent Beck · the lesson this project re-taught me
中文排版 · Chinese

邊緣快取實驗

中文使用宙黑體（Zev Hei TC），英文保持 Plus Jakarta Sans。每個簡報只打包用到的字，檔案細小。

  • 延遲降低七倍由 310 ms 降至 42 ms。
  • 設定 lang 屬性中文簡報用 lang="zh-Hant-HK"。

Demo time

Full-bleed orange slide for a pause, a demo, or a big statement.

Thanks!

Let’s build something meaningful together.

  • ericchow.cc
  • github.com/choweric
  • present.ericchow.cc
  • Your city