How to Use Cloudflare Workers and KV Storage (and how CodePen uses both!)
Cloudflare workers are like serverless functions that always run at the edge, making them incredibly fast. Not only that, but the tooling around them is really nice. They can run at particular routes on your own website, removing any awkward CORS troubles, and helping you craft clean APIs. But they also have special superpowers, like access to KV storage (also at the edge), image manipulation and optimization, and HTML rewriting.
In this video, Chris Coyier and Stephen Shaw do a little live coding of a simple Worker so you can get a feel for how they work, then look at 3 major things that CodePen uses Workers for that actually help make CodePen more money than it costs.
00:00 - Beginning
00:23 - The Basics of Cloudflare at CodePen
01:59 - Creating a Worker from the Cloudflare Dashboard
04:15 - Crafting your own Response
05:47 - Creating a KV Namespace
07:03 - Bind the KV to the Worker
07:34 - Getting a value from the KV
09:25 - Incrementing a counter
12:54 - Deal with CORS
14:33 - Attach Worker as a Route on the main domain (forget CORS!)
15:51 - Crafting Landing Pages from the WordPress JSON API on a Rails Site with a Cloudflare Worker and HTMLRewriter
19:08 - WordPress Custom Post Type, the customized Block Editor, and the JSON API
21:03 - The "Shell Page"
22:36 - The Cloudflare Worker performs 2 fetches, the Shell Page and the WordPress content
25:18 - Network Diagram of Content Stitching
28:28 - Serving Images (Sized Screenshots!) via Cloudflare Workers
30:34 - Network Diagram of Screenshot Service
32:34 - Image Resizing with the fetch
34:04 - Offering all Image features as CodePen PRO features
38:15 - Recap
