Add cdn-edge-caching-cache-keys-vary-headers article

Author: webstackdev

.vscode/settings.json

@@ -128,6 +128,7 @@
     "Qualys",
     "redigo",
     "registrator",
+    "Rego",
     "repost",
     "reposts",
     "RGAA",
@@ -151,6 +152,8 @@
     "srgb",
     "startdt",
     "tanabata",
+    "tflint",
+    "tfsec",
     "TIMESTAMPTZ",
     "tktco",
     "Trino",
@@ -164,6 +167,7 @@
     "Tursa",
     "Turso",
     "tydata",
+    "uncacheable",
     "unsampled",
     "unspaced",
     "unstub",

COVERS.md

@@ -201,3 +201,25 @@ Create a split-screen image. Left side shows blue/green: a tightrope walker with
 ### Prompt 5: The Decision Tree
 
 Design an image of an elegant decision tree where a path forks based on questions (traffic control available? instant rollback needed? observability mature?). Different paths lead to different deployment strategy icons. The tree grows from "requirements" soil into "strategy" branches. Style: botanical illustration meets flowchart, organic shapes with technical elements, earth and sky tones, 16:9 aspect ratio.
+
+## cdn-edge-caching-cache-keys-vary-headers
+
+### Prompt 1: The Edge Network Globe
+
+Create an image of a stylized globe with glowing edge nodes (PoPs) distributed across continents. Lines connect users to their nearest edge, with some paths showing "HIT" indicators (fast, glowing) and others showing "MISS" indicators (path continues to central origin). Style: technical network visualization, dark background with neon highlights, blue and cyan color scheme, 16:9 aspect ratio.
+
+### Prompt 2: The Cache Key Anatomy
+
+Design a visualization of a cache key being constructed from its components. Show URL parts (scheme, host, path, query) assembling like puzzle pieces, with some components (cookies, user-agent) being filtered out. The assembled key unlocks a cache vault. Style: technical diagram meets lock/key metaphor, clean lines, warm metal tones for key, cool tones for components, 16:9 aspect ratio.
+
+### Prompt 3: The Vary Header Explosion
+
+Illustrate the combinatorial explosion of cache variants. A single cached response at the top branches into multiple variants based on Accept-Encoding × Accept-Language × Device-Type, showing exponential growth. Some branches are pruned (good), others grow wild (bad). Style: tree/branching diagram, organic growth pattern, green (good) vs red (problematic) branches, 16:9 aspect ratio.
+
+### Prompt 4: The Invalidation Wave
+
+Create an image showing a "purge wave" propagating across a network of edge nodes. The origin sends a signal that ripples outward, each edge node updating as the wave passes. Some nodes update immediately, others lag slightly. Style: ripple effect visualization, concentric circles emanating from center, gradient from fresh (bright) to stale (dim), 16:9 aspect ratio.
+
+### Prompt 5: The Correctness vs Performance Balance
+
+Design a balance scale where one side holds "Performance" (represented by speed/lightning icons, high CHR numbers) and the other holds "Correctness" (represented by checkmarks, security shields). The scale is balanced but precarious. Below the scale, "cache misconfiguration" tips it dangerously toward performance. Style: classical balance scale with modern tech iconography, warning colors where imbalanced, 16:9 aspect ratio.

_TODO.md

@@ -189,6 +189,7 @@ To overlay an article title and published date on a cover image, use CSS positio
 - Mathjax not working on inline formulas: "Where $L$ is the average number of items in the system (queue depth), $\lambda$ is the arrival rate (requests per second), and $W$ is the average time in system (latency)." In src/content/articles/backpressure-load-shedding-admission-control-overload/index.mdx
 - Uppy, Tus server, whatever other server needed
 - Need a Q & A format to use in blameless-postmortem-incident-analysis-systemic-causes
+- Numbering for ordered lists breaks when there are code blocks in between numbered list elements, like in src/content/articles/cdn-edge-caching-cache-keys-vary-headers/index.mdx
 
 ## Reading position indicator
 
@@ -240,6 +241,10 @@ High Resolution: Seedream 4.0 is capable of generating native high-resolution im
 
 Complex Text and Instruction Following: The model demonstrates an enhanced understanding of complex semantic prompts and excels in rendering dense and accurate text within the generated images, a common weakness in other AI image models.
 
+## Content Issues
+
+- "### Geographic/Currency Mismatches" in src/content/articles/cdn-edge-caching-cache-keys-vary-headers/index.mdx
+
 ## Content Instructions
 
 Let's write our next article. Review ./CONTENT.md for the goals and voice to use in our website. Each article outline includes various components we use on our site that can be incorporated into the final article but do not have to be included if they don't fit into the content well or are excessive.
@@ -262,7 +267,7 @@ some config
 \`\`\`
 ```
 
-For code examples like YAML config, use a concrete tool context so readers can understand where they would deploy or use the code. A single comment line or reference to the tool, or a descriptive file name, is sufficient. Prefer showing usage for AWS but a small amount of variety showing open source tools is the optimal case. So, for example, if there were four config examples, three might apply to AWS and one to an alternative tool. Do not include multiple tables, code blocks, or mermaid diagrams in a row without text between them to break them up.
+For code examples like YAML config, use a concrete tool context so readers can understand where they would deploy or use the code. A single comment line or reference to the tool, or a descriptive file name, is sufficient. Prefer showing usage for AWS but a small amount of variety showing open source tools is the optimal case. So, for example, if there were four config examples, three might apply to AWS and one to an alternative tool. Do not include multiple tables, code blocks, or mermaid diagrams in a row without text between them to break them up. Do not import the Callout component, it is automatic.
 
 __review__