StealThis .dev
Pages Medium

Wiki — Scheduled Tasks Concept Book (field-manual layout)

A paper-and-serif 'concept book' page that teaches scheduled tasks (cron container jobs) end to end for a fictional platform. A sticky chapter sidebar with auto-numbered links sits left of an 880px reading column that mixes a bold cover header, ruled chapter sections, a cron-anatomy diagram, a simulated task-card UI with numbered callouts, ok/warn/danger callout boxes, numbered step cards, and dark code blocks — HTML and CSS with a tiny smooth-scroll script.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Scheduled Tasks Concept Book (field-manual layout)

A long-form “concept book” page with an old-paper, serif reading feel — think an internal field manual typeset like a real book. The shell is a two-column grid: a sticky sidebar on the left with a mono brand kicker and a chapter list whose numbers (01, 02, …) come from a pure-CSS counter, and an 880px reading column on the right. The cover header opens with a letter-spaced kicker, a clamped display headline, an italic subtitle, and a mono meta line above a heavy 3px rule.

Each chapter starts with a 2px top rule and a green mono chapter number, and the body composes a small kit of reusable elements:

  • Cron-anatomy strip — the six fields of an AWS-style cron expression rendered as dark chips with labels underneath.
  • Simulated UI card (.uicard) — a faux platform task card with header, labeled rows, config fields, environment status pills, and green numbered callout badges that a “field by field” table then decodes.
  • Callout boxes (.box.ok / .warn / .danger) — left-bordered tinted asides with mono uppercase labels.
  • Step cards (.steps) — a CSS-counter ordered list where each item is a card with a floating numbered disc.
  • Data tables in a card background with mono uppercase headers, wrapped in a horizontal-scroll container.
  • Dark code blocks with muted comment (.c) and green string (.g) token spans, plus inline .cron chips for expressions.

The demo content is a complete, platform-agnostic manual on scheduled tasks — what a one-shot container job is vs. a worker or API, 6-field cron syntax and UTC gotchas, the one-Dockerfile-per-task pattern, a create-a-new-task checklist, sizing and idempotency best practices, and a portable template chapter — for a fictional acme-service. The only JavaScript is a tiny handler that smooth-scrolls the sidebar’s chapter links (fragment navigation is blocked inside sandboxed preview iframes); below 900px the sidebar unsticks and stacks above the content.

Illustrative UI only — fictional platform, service, and jobs.