Frontrunners 2024
who it's for
frontend developers, web platform engineers, React developers, full-stack developers, engineering managers, site reliability engineers, security engineers
topics
OpenTelemetry browser tracing; SolidJS universal renderer; Trusted Types DOM XSS prevention; WebContainers in-browser Node; Angular smart directives; Jekyll to Next.js migration; Playwright screenshot testing; ChatGPT API with Next.js; hand-coded SVG visualizations; three.js animated globe; Melange OCaml-to-JS compilation; Battlesnake TypeScript bots
| title | author | length |
|---|---|---|
| "Observability for the Front End" | Jessica Kerr | 30m |
Claim: OpenTelemetry can trace browser requests end-to-end but it’s partial and fiddly. Uses OpenTelemetry protocol with W3C traceparent headers, demo ties a… | ||
| "SolidJS: The Universal Renderer" | Chris Lorenzo | 30m |
Claims SolidJS is the fastest frontend framework and demonstrates a concrete Universal Renderer by wiring Solid into LightningJS (a WebGL renderer)… | ||
| DOM XSS Protection at Scale | Jen Ozmen | 34m |
Claims that Trusted Types plus a rollout pipeline eliminates DOM XSS at scale, with Google reporting zero DOM XSS across hundreds of apps serving billions of… | ||
| "Spinning up Node in the Browser" | Tim Simms | 39m |
Claim: a full dev stack runs entirely in the browser so collaborators need no local installs. Demo uses StackBlitz web containers, the WebContainers API and… | ||
| "Simpler Enterprise Angular Components with Smart Directives" | Jacob Yacovelli, Laura King | 27m |
A design pattern called smart directives extracts observable and store logic out of overloaded smart components so page components only handle layout… | ||
| "Lessons Learned Migrating from Jekyll to Next.js with Help from Playwright" | M. Scott Ford | 35m |
Migration moves a Jekyll site into Next.js, preserves existing markdown collections and nearly about 1,000 blog posts, and validates fidelity with Playwright… | ||
| "We're Snaking it Live!" | Michael Schoonmaker | 39m |
Multiplayer Battlesnake runs as a web server with /info /start /move /end routes, 500ms turns and snakes that starve after 100 ticks; a TypeScript Express bot… | ||
| "Melange: The Next Frontier in Type-Safe Web Development" | Dillon Mulroy | 46m |
Melange compiles OCaml/ReasonML to idiomatic, readable JavaScript and promises near‑seamless interop with npm via PPX bindings, ships a CLI/boilerplate via… | ||
| "EASILY level up your website using the ChatGPT API and NextJS" | Jim Becker | 19m |
Shows how to wire the ChatGPT API into a NextJS app, create an API key, and handle pricing (examples given: $10 per million input / $30 per million output for… | ||
| "Hand Coded Artisanal Data-Visualization" | Nathan E. Lilly | 29m |
Claims that hand-coded SVG replaces heavy libraries, demonstrates no d3 required workflows, and shows concrete wins: a full-screen HD SVG is 14K versus a GIF… | ||
| "Where Numbers Meet Art: Building Data Visualizations In The Modern Web" | Shri Khalpada | 26m |
Argues that data visualization is an artful practice grounded in cognitive psychology and tradeoffs between precision and pattern recognition, shows a chord… | ||
| "Build Your Own Devtools" | Alec Barrett | 26m |
Practical criteria and concrete outcomes: a Chrome extension adds a URL pretty printer that structures long app URLs so parameters are editable and time-travel… | ||
| "Simplicity: The Key to Software Success" | Brian Childress | 37m |
The central claim is that simplicity reduces failure: an architecture is reworked by removing roughly 80% of picked AWS services to convert a sprawling… | ||
| nothing matches | ||