xzyfer

Surrogate Keys

The fastly article on the topic does a great job of explaining what surrogate keys are. I suggest familiarising yourself with it before continuing.

TLDR; the Surrogate Keys response header is a space delimited list of "tags" for that given response.

Why

Using surrogate keys we can more precisicely purge specific sets of reponses from the fastly cache. For exmaple we could choose to purge all CMS template, or CMS resource centre templates, or simply all CMS pages with a single column upsell element.

xzyfer

layout	title
main.hbs	About

About

src/pages/linters/index.md

xzyfer

// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----

@mixin using-at($parent) {
  #{$parent}[data-foo] & {
    foo: bar
  }
}

xzyfer

// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----

@mixin using-at($parent:"parent") {
  #{$parent}[data-foo] & {
    foo: bar
  }
}

xzyfer

// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----

@mixin using-at($parent:"parent") {
  #{$parent}[data-foo] & {
    foo: bar
  }
}

xzyfer

// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----

.multi-column__via-row {
  display: block;
}
.multi-column__via-column {
  display: none;

xzyfer

// ----
// libsass (v3.3.2)
// ----

div {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%2851, 51, 51%29'></polygon></svg>");
}

xzyfer

// ----
// libsass (v3.3.2)
// ----

.bar {
  color: green;
}

.foo {
  @extends .bar;

xzyfer

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$foo: ("shadows": (
  "slim-shady": (0 0 5px 0 rgba(0,0,0,0.1),  0 3px 6px 0 rgba(0,0,0,0.2)),
  "dj-shadow": (0 0 5px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.3)),
));

xzyfer

// ----
// libsass (v3.2.5)
// ----

$gutters: 1/5;
a { b: $gutters; }